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

Can you make your question clear? Unable to understand what you are trying to achieve — akashrajkn
– akashrajkn, Commented Mar 9, 2017 at 5:59
as you can see I the code I passed an array in which type is there having 3 things as inbox style, image style and big text I'm showing table relevant to that array. what I want right now is I want to open the relevant pages of these styles on clicking a table row — Piyush
– Piyush, Commented Mar 9, 2017 at 7:08

Shubham Khatri · Accepted Answer · 2017-03-09 10:00:25Z

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;

edited Mar 9, 2017 at 10:00

answered Mar 9, 2017 at 8:30

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Piyush Over a year ago

thanks. It worked a bit you can say Using this I can click a row but only the else condition is satisfied its only satisfying else condition not the earlier if else conditions every time I click on any row its displaying the page corresponding to the else part

Shubham Khatri Over a year ago

Can you tell what is being returned with console.log(this.props.type.Bigtext) also you can bind the handleClick function. I have updated the code

Piyush Over a year ago

i wrote this as a breakpoint you can say to check console.log("abc"+this.state.data.type); it had returned the output in console as "abc undefined"

Shubham Khatri Over a year ago

That doesn't work because your state data is an array and hence should be console.log("abc"+this.state.data[0].type); I have updated my code. Try that

Piyush Over a year ago

It WORKED BRO ::)

|

Collectives™ on Stack Overflow

React js Navigation through table rows

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related