How pass array data to next page component on click?

Question

I am beginner in Reactjs, so I have less knowledge in this, so can anyone help to solve my probleem? clickMe() function receives selected row data in array, data is print successfully in console.log(item) but now I want to pass this data to next page and display there. So please help suggest to me how I can do this.

class Datajc extends Component {
constructor(props) {
    super(props)

    this.state = {

        Data:[
             {
               id:1,
               title:'abd',
               name: 'abcd' 
             },
             {
                id:2,
                title:'asd',
                name: 'asdfd' 
              },
              {
                id:3,
                title:'pqr',
                name: 'pqrst' 
              }
         ]
    }
}



clickMe(item){
    const {history}=this.props;
    alert('clicked');
    console.log(item);
    history.push('/Infojc')

}

Below I display array data in a table using a map function and try to access on click in clickMe() function:

    render() {
        return (
            <div>
                <h1>welcome to React</h1>

             <table>
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Name</th>
                    </tr>
                {
                    this.state.Data.map((item,index)=>(
                    <tr key={item.id}>
                    <Router>    
                        <td ><Link to={'Infojc'}><a onClick={this.clickMe.bind(this,item)}>{item.id}</a></Link></td>
                    </Router>
                        <td >{item.title}</td>
                        <td>{item.name}</td>
                    </tr>
                ))
                }
                </table>
            </div>
        )
    }
}

export default Datajc

https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4 check this — SR810, Jul 18 '20 at 07:14

score 0 · Accepted Answer · answered Jul 18 '20 at 09:14

Ciao, well you can use several ways but, according to your code, the faster way could be:

clickMe(item){
    const {history}=this.props;
    alert('clicked');
    console.log(item);
    history.push({
       pathname: '/Infojc',
       state: { myitem: item }
   })

}

Then to retrieve that on /Infojc page you could do:

this.props.history.location.state.myitem

How pass array data to next page component on click?

1 Answers1