ReactJS: send object as parameter to function, the fields are undefined - reactjs

Question

I'm react beginner. strange behavior:
I send an objct as parameter to a function. the function get the object , but the function can access field of this object. the fields are undefined.
I send the object 'movie' to the handleClickDelete. see the console logs: the 'movie' object is correct. but the movie._id is undefined.
the component:
class MainList extends Component {
state = {
count: APIMovieService.getMovies().length,
movies: APIMovieService.getMovies()
};
handleClickDelete = movie => {
console.log("delete movie", movie);
console.log("delete movie Id", movie._id);
const updateList = this.state.movies.filter(
iMove => iMove._id === movie._id
);
// APIMovieService.deleteMovie(movie._id);
console.log("updateList: ", updateList);
this.updateState(updateList);
};
updateState = updateList => {
this.setState({ movies: updateList });
this.setState({ count: updateList.length });
};
render() {
return (
<div>
{this.handleCounter()}
{this.test1()}
<table className="table">
<thead>
<tr>
<th scope="col">title</th>
<th scope="col">genre</th>
<th scope="col">in stock</th>
<th scope="col">rate</th>
<th scope="col">delete</th>
</tr>
</thead>
<tbody>
{this.state.movies.map(movie => (
<tr key={movie._id}>
<td scope="row">{movie.title}</td>
<td>{movie.genre.name}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td>
<button
className="btn btn-danger"
onClick={() => {
this.handleClickDelete({ movie });
}}
>
delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
handleCounter() {
return this.state.count === 0
? "the list is empty"
: this.state.count + " in the list";
}
export default MainList;
the log:
see picture.enter image description here

Answer 1

You are putting the movie inside an object movie.
For access the properties you need to access another movie property before, like this.
movie.movie.__id
To avois this behavior you need to change this:
onClick={() => {
this.handleClickDelete({ movie });
}}
For this
onClick={() => {
this.handleClickDelete(movie);
}}

Answer 2

You are passing the movie as an object. You need to pass it as a variable like:
<button
className="btn btn-danger"
onClick={() => this.handleClickDelete(movie)}
>
delete
</button>
Now you can access it in your handleClickDelete
const handleClickDelete = movie => {
console.log("delete movie", movie);
console.log("delete movie Id", movie._id);
}
Hope this works for you.

Answer 3

Change :
onClick={() => {
this.handleClickDelete({ movie });
}}
To :
onClick={() => {
this.handleClickDelete(movie)
}};```