After reviewing your code, I have identified 2 necessary changes:
Firstly, in your index.js file, you should update the link's "to" property as follows:
to={{ pathname: `/cards/${results.id}`, state: results }}
Secondly, in your details.js file, modify the render function like so:
render() {
const id = this.props.match.params.id;
const data = cardData.data.Table.find(item => item.id === id)
return (
// Card details component
<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>
);
}
It is important to note that in the Link element, you are directing to /cards/${results.id}, where the id corresponds to the record from the database.
Furthermore, in details.js, you are extracting and utilizing the data associated with the id parameter from the table.
The errors in your code were:
- In index.js, the link was pointing to
/cards/${results.index}, but results.index was undefined.
- In details.js, the way you referenced the data was incorrect, for instance:
cardData.data.Table[id].first_name
Remember that cardData.data.Table consists of an array of objects, where the ids are properties. Accessing cardData.data.Table[id] would only retrieve data for an id if that array contained sufficient objects up to that id value.