React onClick pass object ID from a JSON array - arrays

Question

I'm very new to React and coding in general. I have a project where I need to be able to click on a movie poster and have it open a new page where it would show details on the movie.
Below is the JSON
[
{
"id": 1,
"name": "The Matrix",
"image": "/assets/images/posters/the_matrix.jpg"
},
{
"id": 2,
"name": "Jaws",
"image": "/assets/images/posters/jaws.jpg"
},
{
"id": 3,
"name": "Jurassic Park",
"image": "/assets/images/posters/jurassic_park.jpg"
}
]
Below is the component that I'm passing the individual movies through
class LibraryCard extends Component {
render () {
return (
<div>
<div className="container">
<div className="row">
{films.map((props) => {
// Returns film poster and title
return <div onClick={() => props.handleUpdateFilm(props.id)}>
<a onClick={() => {window.location.href="filmdetails/" + props.name;}}><img src={props.image} alt={props.name} key={props.id}></img></a>
<h6>{props.name}</h6>
</div>
})}
</div>
</div>
</div>
);
}
}
The card is being passed into the Films page which displays all the posters for the film
const Films = () => (
<div>
<LibraryCard />
</div>
);
export default Films;
Below is the Details page that will display all the info for each film that's clicked.
class Details extends Component {
render() {
return (
<div><h1 align="center">This is a story...</h1>
<div className="container">
<div className="row">
{Films.map(Film => <img src={Film.image} key={Film.id} id={Film.id} alt={Film.name} handleClick={this.handleClick} />)}
</div>
</div>
</div>
);
}
}
Pardon the inefficiency of the code. Again, I'm new to this. I just need help getting it to load to a new page for each movie. Any help would be appreciated.

Answer 1

What you are looking for here is a curried function :
handleUpdateFilm = id => ev => {
//Do whatever you want with the id variable here
}
This function will accepts 2 sets of parameters, the first time it is called, only the id will be set, the second time, the event will be given and the instructions in it will be executed.
Here is how you can use and bind it in your code :
class LibraryCard extends Component {
handleUpdateFilm = id => ev => {
//Do whatever you want with the id variable here
}
render() {
return (
<div>
<div className="container">
<div className="row">
{films.map(({ id, name, image }) => // Props deconstruction
<div onClick={this.handleUpdateFilm(id)}> //Your function binding
<a onClick={() => { window.location.href = "filmdetails/" + name; }}>
<img src={image} alt={name} key={id}></img>
</a>
<h6>{name}</h6>
</div>
)}
</div>
</div>
</div>
);
}
}
I also removed the variable named props in your code, if something is not a prop, try to avoid naming it props.