CODEWITHSUNDEEP
javascriptreactjs
Raphael
Raphael

Reputation: 1812

React - Triggering click event on table row and display the selected row details in another page

I have an array of 10 rows on click of individual row I need to go to new route in which I need to populate the selected row details.As of now I am getting the complete row data but how to reference to get the row data in new page.

how to get data.title and data.score in new page.

I am new to react, any guidance would be helpful.

I have checked this post but I need more. React - Triggering click event on table row

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {loadUserInfo} from '../../actions/news.js';
import './Main.css';
class Main extends Component {

    constructor(props){
        super(props);
    }

    state= {

    }


    detailsView = (event) => {
        const row = event.currentTarget;
        console.log(row);
        console.log(event);
    }

    render() {
      let moviestorender = '';

      if(this.props.news.newsArray && this.props.news.newsArray.length ==10 && this.props.news.userProfile && this.props.news.userProfile.length ==10){

     moviestorender = this.props.news.newsArray.map((data, i) => {
          if (i < 9)
          {
            return (
                 <tr key={data.id} onClick={this.detailsView}>
                        <td className="title">{data.title}</td>
                        <td className="row">{data.score}</td>
                        <td className="row">{data.by}</td>
                        <td className="row">{data.karma}</td>
                        <td className="row">{data.created}</td>
                </tr>
            )
          }
        })
      }

      return(

        <div className="mainStart">
            <table><tbody><tr>
                        <th className="title">Title</th>
                        <th className="row">Score</th>
                        <th className="row">Author</th>
                        <th className="row">Author's Karma</th>
                        <th className="row">Date Created</th>
                    </tr>{moviestorender}</tbody></table>

        </div>
      )
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Main);

EDIT 2: First component from where we click the row

import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
import {loadUserInfo} from '../../actions/news.js';

import './Main.css';
class Main extends Component {
    constructor(props) {
        super(props);
        this.onLogout = this.onLogout.bind(this);
        }

        onLogout(props) {
            this.props.history.push({
                pathname: '/details',
                /* state: {
                    key: this.state
                } */
            });
        }

    state= {

    }


    render() {
      let moviestorender = '';

      if(this.props.news.newsArray && this.props.news.newsArray.length === 10 && this.props.news.userProfile && this.props.news.userProfile.length === 10){

     moviestorender = this.props.news.newsArray.map((data, i) => {
          if (i < 9)
          {
            return (<tr key={data.id} onClick={this.onLogout}>
                        <td className="title">{data.title}</td>
                        <td className="row">{data.score}</td>
                        <td className="row">{data.by}</td>
                        <td className="row">{data.karma}</td>
                        <td className="row">{data.created}</td>
                </tr>)
          }
        })
      }

      return(

        <div className="mainStart">
            <table>
                <tbody>
                    <tr>
                        <th className="title">Title</th>
                        <th className="row">Score</th>
                        <th className="row">Author</th>
                        <th className="row">Author's Karma</th>
                        <th className="row">Date Created</th>
                    </tr>{moviestorender}
                </tbody>
            </table>

        </div>
      )
    }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main)); //  this is used to get the history object from with router and to connect to store

Second Component where it navigates when clicked on the row. now the key is a string

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Details extends Component {

    render() {
        let news = '';

        if(this.props.location.key){

              return (
                  <div>
                          <div className="title">{this.props.location.key.title}</div>
                          <div className="row">{this.props.location.key.score}</div>
                          <div className="row">{this.props.location.key.by}</div>
                          <div className="row">{this.props.location.key.karma}</div>
                          <div className="row">{this.props.location.key.created}</div> 
                  </div>
                  )

        }

        return(

          <div className="mainStart">
                <h1> This is a details page </h1>
                {news}
                <Link to='/'>Home</Link>
          </div>
        )
      }
}

export default Details;

when tried to set the state as you mentioned getting the below error DataCloneError: Failed to execute 'pushState' on 'History': function createHref(location) {

Upvotes: 0

Views: 6205

Answers (2)

Raphael
Raphael

Reputation: 1812

How to access custom attributes from event object in React?

The updated answer from Jared Forsyth in the above post helped me solve the issue.

First component

import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
import {loadUserInfo} from '../../actions/news.js';

import './Main.css';
class Main extends Component {
    constructor(props) {
        super(props);
        }

        onLogout=function (data) {
              this.props.history.push({
                pathname: '/details',
                 state: {
                    key: data
                } 
            });  
        }

    render() {
      let moviestorender = '';

      if(this.props.news.newsArray && this.props.news.newsArray.length === 10 && this.props.news.userProfile && this.props.news.userProfile.length === 10){

     moviestorender = this.props.news.newsArray.map((data, i) => {
          if (i < 9)
          {
            return (<tr key={data.id} data-item={data} onClick={()=>this.onLogout(data)}>
                        <td className="title">{data.title}</td>
                        <td className="row">{data.score}</td>
                        <td className="row">{data.by}</td>
                        <td className="row">{data.karma}</td>
                        <td className="row">{data.created}</td>
                </tr>)
          }
        })
      }

      return(

        <div className="mainStart">
            <table>
                <tbody>
                    <tr>
                        <th className="title">Title</th>
                        <th className="row">Score</th>
                        <th className="row">Author</th>
                        <th className="row">Author's Karma</th>
                        <th className="row">Date Created</th>
                    </tr>{moviestorender}
                </tbody>
            </table>

        </div>
      )
    }
}

}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main)); //  this is used to get the history object from with router and to connect to store

Second Component

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Details extends Component {

    render() {
        let news = '';

        if(this.props.location.state.key){

              return (
                  <div>
                          <div className="title">{this.props.location.state.key.title}</div>
                         {/*  <div className="row">this.props.location.key.[score]</div>
                          <div className="row">this.props.location.key.[by]</div>
                          <div className="row">this.props.location.key.[karma]</div>
                          <div className="row">this.props.location.key.[created]</div>  */}
                  </div>
                  )

        }

        return(

          <div className="mainStart">
                <h1> This is a details page </h1>
                {news}
                <Link to='/'>Home</Link>
          </div>
        )
      }
}

export default Details;

Upvotes: 0

Adnan
Adnan

Reputation: 1707

If you are using react-router so you can send data to next route 

 import { withRouter } from 'react-router-dom'

 nextRoute = () => {
 this.props.history.push({
  pathname: "pathnamehere",
  state: {
    key: this.state
   }
 });
};

And you can get data in next route also

props.location.state.key.[propertyName]

Upvotes: 3

Related Questions