React js Navigation through table rows

Question

import React, { Component } from 'react';
import { Link } from 'react-router'
import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap';

class Notifications extends Component {
  constructor(){
    super();
    this.state = {
            data:[
                {title:"Nikko Laus1" , text:"abcd" , type:"Big text" },
                {title:"Sam Collins", text:"" ,type:"Inbox style"},
                {title:"Sam ", text:"" ,type:"Image style"}   
            ]
        };
  }

  render() {
    let rows = this.state.data.map(person =>
        {
            return <TableRow key={person.id} data={person}/>
        });
    return (<div><div>
          <div className="animated fadeIn">
           <div className="px-2 mb-1">
                <Link to={'/Components/BasicNotification'} style= {{ width:20 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Add Notification</Link>

                  </div>

            <br /><div className="card" style={{ width: 57 + '%' }}>
              <div className="card-header">
                 Manage Notifications
              </div>
              <div className="card-block">
               

      <table  className="table table-hover table-outline mb-0 hidden-sm-down">
        
                <tbody>
                {this.props.type.Bigtext ? <Link to={'/Components/BigText'} className="nav-link" activeClassName="active" />:
                this.props.type.ImageStyle ? <Link to={'/Components/ImageStyle'} className="nav-link" activeClassName="active" />:
                <Link to={'/Components/InboxStyle'}   className="nav-link" activeClassName="active" />}
                 {rows}</tbody>
            </table></div>

               
<br />

            </div>
          </div><div className="px-2 mb-1"><Link to={'/components/tabs'} style={{ width:20 + '%' }} className="px-1 nav-link btn btn-block btn-success" activeClassName="active">Filter Notifications</Link>
</div>
</div></div>
      
      
        
      
    )
  }
}

class TableRow extends React.Component
{
    constructor()
    {
        super();
    }

    render()
    {
        return (<tr>
                    <td className="text-center">{this.props.data.title}<br />
                    {this.props.data.text}<br /></td></tr>
      
            );
    }
}


export default Notifications;

I want to give condition and if else condition and using that condition I want to open an particular page as seen in the code snippet. But when I run no output comes at all. I just wanted to do like on the basis of notification type relevant page is to be opened on clicking that table row

Answer 1

You can make use of this.context.router.push to dynamically change the route onClick of the table row. See the below snippet.

import React, { Component } from 'react';
import { Link } from 'react-router'
import { Dropdown, DropdownMenu, DropdownItem, Progress } from 'reactstrap';

class Notifications extends Component {
  constructor(){
    super();
    this.state = {
            data:[
                {title:"Nikko Laus1" , text:"abcd" , type:"Big text" },
                {title:"Sam Collins", text:"" ,type:"Inbox style"},
                {title:"Sam ", text:"" ,type:"Image style"}   
            ]
        };
  }
  static contextTypes = {
    router: React.PropTypes.object
  }
  handleClick = (index) => {

      if(this.state.data[index].type === "Big text") {
          this.context.router.push('/Components/BigText');
      } else if(this.state.data[index].type === "Image style") {
          this.context.router.push('/Components/ImageStyle');
      } else {
          this.context.router.push('/Components/InboxStyle');
      }

  }
  render() {
    let rows = this.state.data.map((person, index) =>
        {
            return <TableRow key={person.id} data={person} onClick={this.handleClick.bind(this, index)}/>
        });
    return (<div><div>
          <div className="animated fadeIn">
           <div className="px-2 mb-1">
                <Link to={'/Components/BasicNotification'} style= {{ width:20 + '%' }} className="nav-link btn btn-block btn-success" activeClassName="active">Add Notification</Link>

                  </div>

            <br /><div className="card" style={{ width: 57 + '%' }}>
              <div className="card-header">
                 Manage Notifications
              </div>
              <div className="card-block">


      <table  className="table table-hover table-outline mb-0 hidden-sm-down">

                <tbody>

                 {rows}</tbody>
            </table></div>


<br />

            </div>
          </div><div className="px-2 mb-1"><Link to={'/components/tabs'} style={{ width:20 + '%' }} className="px-1 nav-link btn btn-block btn-success" activeClassName="active">Filter Notifications</Link>
</div>
</div></div>




    )
  }
}

class TableRow extends React.Component
{
    constructor(props)
    {
        super(props);
    }

    render()
    {
        return (<tr onClick={this.props.onClick}>
                    <td className="text-center">{this.props.data.title}<br />
                    {this.props.data.text}<br /></td></tr>

            );
    }
}


export default Notifications;