React js Navigation through table rows - reactjs

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;