I display in a component some movies that I get with an API call and a .map
method. When I try to delete an item into this list of movies, the deletion is only done on the last item.
I use the splice()
method and I give an index to my deleteMovieFromFav()
function.
I don't know what I'm missing..
Would anyone know how to do it?
the function for delete a movie:
deleteMovieFromFav = (idx) => {
let { movies } = this.props.movieReducer;
movies.splice(idx, 1)
this.setState({movies: [...movies]})
}
onClick
for delete a movie:
{
this.props.movieReducer.movies.map((movie, idx) => {
return(
<div key={idx}>
<Snackbar
action={[
<Button key="undo" color="secondary" size="small"
onClick={() => {
this.deleteMovieFromFav(idx)
this.handleCloseAlert()
}}> Yes
</Button>,
<Button
key="no"
color="secondary"
size="small"
onClick={() => this.handleCloseAlert()}>
]}
/>
</div>
)
})
}