In the below code the changes are reflecting to all the items in the movies when i click Like button?how could it be set only for the item which i click the like button
import React, { Component } from “react”;
import { getMovies } from “…/services/fakeMovieService”;
//import “./index.css”;
class Movies extends React.Component {
state = {
movies: getMovies(),
count: 0,
};
onHandleDelete = (movie) => {
console.log(movie._id);
const movies = this.state.movies.filter((m) => m._id !== movie._id);
this.setState({ movies });
};
onLike = () => {
/
this.setState({ count: this.state.count + 1 });
};
render() {
if (this.state.movies.length === 0) {
return <p>There are no movies in the database </p>;
}
return (
<div>
<p>Showing {this.state.movies.length} movies</p>
<table className="table">
<thead>
<tr>
<th>Title </th>
<th>Genre</th>
<th>Stock</th>
<th>Rate</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.movies.map((movie) => (
<tr key={movie._id}>
<td>{movie.title}</td>
<td>{movie.genre.name}</td>
<td>{movie.numberInStock}</td>
<td>{movie.dailyRentalRate}</td>
<td>
<button
onClick={() => this.onHandleDelete(movie)}
className="btn btn-warning"
>
Delete
</button>
<button
onClick={() => this.onLike()}
className="btn btn-danger"
>
like
{this.state.count}
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
}
export default Movies;