How to add event handler for deleting a single item from the list?

Question

I have the following code, and I want to add an even handler for detecting when delete button is clicked and then remove the specific item from list.

Favorites.js

 constructor(props) {
        super(props);
        this.state = {
            movies: []
        };

        this.clearSaved = this.clearSaved.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
    }

MovieList.js

export default ({ movies }) => {
    return(
        <div id="saved-movies-list">
        <ul className="saved-movies-list">
        { movies.map(movie => <li key={ movie.imdbID }><Movie movie={ movie } /></li>) }
        </ul>
        </div>
    )
};

Movie.js

const Movie = ({movie}) => {
     return (<div className="movie-card" id={movie.imdbID}>     
          {
               // eslint-disable-next-line
               movie.poster == 'N/A' ? 
               <div className="movie-card-poster missing">
               <img className="d-block h-100" src={movie_poster} alt="" /> 
               </div>
               :
               <div className="movie-card-poster">
               <img className="d-block h-100" src={movie.poster} alt="" />
               </div>
          }
          <div className="body">
               <div style={{ maxWidth: '80%' }}>
                    <h5 class="card-title">{movie.title}</h5>
               </div>
               <p className="text-secondary">{ movie.year }</p>
               {!movie.runtime ? "" : <p className="text-secondary">{ movie.runtime }</p>}
               <p className="plot">{movie.description}</p>
               <a href="#" className="delete-movie" title="Remove this movie"><FontAwesomeIcon icon="minus-circle" size="1x" /></a>
          </div>
     </div>)
}

I need to attach event to this line:

       <a href="#" className="delete-movie" title="Remove this movie"><FontAwesomeIcon icon="minus-circle" size="1x" /></a>

But, I do NOT know how to? Writing this.props. ... does not work!

Does this answer your question? [How to delete a ToDo Item onClick in React?](https://stackoverflow.com/questions/44831916/how-to-delete-a-todo-item-onclick-in-react) — Ali Kleit, Jun 01 '20 at 18:14

Ioannis Potouridis · Accepted Answer · 2020-06-02T07:16:38.873

1

In Movie component:

Add a callback prop in your Movie component, call whatever you like e.g.: onDelete.

Then add handleClick handler that calls your callback prop,

const handleClick = (event) => {
  event.preventDefault();

  props.onDelete(); // This callback is coming from your `Movie` props.
}

and pass it to your anchor element's onClick attribute.

<a
  href="#"
  className="delete-movie"
  title="Remove this movie"
  onClick={handleClick}
>
  <FontAwesomeIcon icon="minus-circle" size="1x" />
</a>

In MovieList component:

Add a callback prop in your MovieList component and call it onDeleteMovie.

export default (props) => {

Then pass it in your Movie's onDelete prop like this:

{props.movies.map((movie, index) => 
  <li key={index}> // since imdbID is not unique after all use the index
    <Movie
     movie={movie}
     onDelete={() => props.onDeleteMovie(index)}
    />
  </li>
)}

In Favorites component:

Add a handleDelete method in Favorites component that looks like this.

handleDelete(index) {
  const movies = [...this.state.movies];

  movies.splice(index, 1);

  this.setState({ movies });
}

and pass it to your MovieLists onDeleteMovie prop.

<MovieList
  movies={this.state.movies}
  onDeleteMovie={this.handleDelete}
/>

edited Jun 02 '20 at 07:16

answered Jun 02 '20 at 05:19

Ioannis Potouridis

1,246
6
7

Ioannis, my movie.js looks like this now, `const Movie = (props) => {` – John Smith Jun 02 '20 at 05:50
1

I also had a mistake, I wrote Movies instead of MovieList and passed the movies from state. I guess you have something similar to Favorites component. – Ioannis Potouridis Jun 02 '20 at 06:02
Ioannis, MovieList has also props – John Smith Jun 02 '20 at 06:07
I apologize for thi – John Smith Jun 02 '20 at 06:08
I tried adding, `this.state.movies.filter(movie => movie.imdbID != imdbID);` – John Smith Jun 02 '20 at 06:28
1

Don't worry, I'm updating that too. – Ioannis Potouridis Jun 02 '20 at 06:29
I am using `
`

John Smith

Jun 02 '20 at 06:29

Ioanns, it removes everything? – John Smith Jun 02 '20 at 06:45

When I click, to remove one single item, it removes all? – John Smith Jun 02 '20 at 06:48

1

Well, do they have common imdbID? – Ioannis Potouridis Jun 02 '20 at 07:02

Good question, I will check now. – John Smith Jun 02 '20 at 07:05

Yes, you were correct. Can I ask, why aren't the specific items removed from the array? – John Smith Jun 02 '20 at 07:09

I am printing the state, after, and it still shows me the items, even if it is removed in the view? setState does not seem to work? – John Smith Jun 02 '20 at 07:11

1

It is expected then that all items are removed. This is why I work with index when I don't know the data. I can change the answer to work with index one last time. – Ioannis Potouridis Jun 02 '20 at 07:13

1

I've updated the answer one last time. Try it this way. Good luck. :-) – Ioannis Potouridis Jun 02 '20 at 07:17

Ioannis, `this.setState({ movies });` it does not seem to make any changes? Do you know why? – John Smith Jun 02 '20 at 07:21

1

Can you share your movies state? – Ioannis Potouridis Jun 02 '20 at 07:31

`this.state = { movies: [] };` that's in the constructor of **favorites.js** – John Smith Jun 02 '20 at 07:33

Then I am doing what you told me! – John Smith Jun 02 '20 at 07:34

Here's something, that seems wrong, `onDelete={props.onDeleteMovie(movie.imdbId)}` in my

during map, having it like that, it will not render anything. Changing it to: `onDelete={() => props.onDeleteMovie(movie.imdbId)}` and you'll get nothing working.

– John Smith Jun 02 '20 at 07:45

score 0 · Answer 2 · answered Jun 01 '20 at 18:14

export default ({ movies }) => {
    const handleDelete = (id) => {
      // write your deleting logic here with item id
    }
    return(
        <div id="saved-movies-list">
          <ul className="saved-movies-list">
          {
             movies.map(movie => 
               <li key={ movie.imdbID }>
                 <Movie
                  movie={ movie }
                  onDelete={() => handleDelete(movie.imbID)}
                 />
               </li>
             )
           }
          </ul>
        </div>
    )
};

in Moive.js

const Movie = ({movie, onDelete}) => {
  return (
    ...
    <a href="#" className="delete-movie" title="Remove this movie" 
      onClick= {onDelete}
    > 
     <FontAwesomeIcon icon="minus-circle" size="1x" />
    </a>
    ...
  )
}

I passed the handleDelete with parameter item id to every child component as onDelete function.

TypeError: props.handleDelete is not a function – John Smith Jun 02 '20 at 04:20 — John Smith, Jun 02 '20 at 04:20

score 0 · Answer 3 · answered Jun 01 '20 at 18:17

For the event handler, you can use simple onClick event like this:

{ movies.map(movie => <li onClick={()=>handleClick(movie.imdbID)} key={ movie.imdbID }><Movie movie={ movie } /></li>) }

Then you should write your handleClick function, which you want to delete the movie. Now, there's a lot of ways you can take that deletion. But lets asume you just don't want it to render. Then you should manage an array/collections of imdbID's you don't want to render and using it in your render event.

Using React Hooks:

export default ({ movies }) => {

    const [removeList, setRemoveList] = useState([]);
    const handleClick = (id) => setRemoveList([...removeList, id]);   

    return(
        <div id="saved-movies-list">
            <ul className="saved-movies-list">
                { movies.map(movie => (!removeList.includes(movie.imdbID)) && <li onClick={()=>handleClick(movie.imdbID)} key={ movie.imdbID }><Movie movie={ movie } /></li>) }
            </ul>
        </div>
    )
};

score 0 · Answer 4 · answered Jun 01 '20 at 18:18

0

In the file that you are declaring movies, also declare this function

   const deleteMovie = key => this.setState({ movies: this.state.movies.filter(movie => movie.imdbID != key })

Pass it as props to Movie, and use like

  onClick ={()=> deleteMovie(movie.imbdID)}

answered Jun 01 '20 at 18:18

Hagai Harari

2,767
3
11
23

TypeError: can't access property "setState" of undefined – John Smith Jun 02 '20 at 03:56
TypeError: props.handleDelete is not a function – John Smith Jun 02 '20 at 04:20

How to add event handler for deleting a single item from the list?

4 Answers4