ReactJs Pass data between multiple components using Id field

Question

How can i pass Data from Main Component to child component based on the record Id. I have a index.js and detail.js pages. In the index page i have a link as <Link to={{ pathname: /cards/ ${results.id} , state: results }} className={ card-wrapper restore-${results.id} }> {results.first_name} </Link> when i click on the link i want to send the data associated to that record /Id value of the link to the detail page and display.

Answer 1

Ok, I've examined your code and you need to do 2 changes: From your index.js file, you need to change your link's to prop to:

 to={{ pathname: `/cards/${results.id}`, state: results }}

In your details.js, change your render function to:

 render() { const id = this.props.match.params.id; const data = cardData.data.Table.find(item => item.id === id) return ( // Card details compoment <div className="card-details"> <h2>{data.first_name}</h2> <h2>{data.id}</h2> <Link to={{ pathname: "/", state: this.props.location.state }} > <button>Return to list</button> </Link> </div> ); }

Notice in the Link that you are linking to /cards/${results.id} , the id is the id of the record from the database.

Then in details.js,you find from the data a record with the id from the params and you use the data in that record.

You had done 2 mistakes:

1. You were linking to /cards/${results.index} in index.js, results.index is undefined.
2. In details.js, you were referencing data for example as:

 cardData.data.Table[id].first_name

But cardData.data.Table is an array of Objects and the ids are properties of the objects. cardData.data.Table[id] would only return data for an id such as 1002 if that array had at least 1003 objects in it.

Answer 2

In this case, you can pass cardData.data.Table data to as props & get id from router like .....params.id.

Then replace cardData.data.Table[0] by cardData.data.Table[i].