title: delete button to delete a movie card
body: <p>I'm trying to find the bug in my delete button code, but can't find it. -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
  
  <hr>
  
  <p><strong>HOME.js</strong></p>
  
  <pre><code>import React, { PureComponent } from 'react'
  import {movies} from "./movies.js"
  import Card from "./Card.js"
  import "./Home.css"
  
  class Home extends PureComponent {
      constructor(props) {
          super(props)
  
          this.state = {
              movieslist: movies   
          }
      }
  
      deleteCard = (removeTitle) =&gt; {
          // var newMovieList = [...this.state.movieslist];
          // newMovieList.splice(newMovieList.findIndex(({title}) =&gt; title !== removeTitle), 1);
          const newMovieList = this.state.movieslist.filter(movie =&gt; movie.title !== removeTitle);
          this.setState({
              movieslist:newMovieList 
          })
      }
  
      render() {
          return (
              &lt;div className="homecontainer"&gt;
                  {
                      this.state.movieslist.map(movie =&gt; {
                      return &lt;Card delete={this.deleteCard} key={movie.id} title={movie.title} category={movie.category} likes={movie.likes} dislikes={movie.dislikes} /&gt;
                      })
                  }
              &lt;/div&gt;
          )
      }
  }
  
  export default Home
  </code></pre>
  
  <hr>
  
  <p><strong>CARD.js</strong></p>
  
  <pre><code>import React, { PureComponent } from 'react'
  import "./Card.css"
  
  class Card extends PureComponent {
  constructor(props) {
      super(props)
  
      this.state = {
          active:false
      }
  
      this.toggleClass=this.toggleClass.bind(this)
      this.handleClick=this.handleClick.bind(this)
  }
  
  toggleClass(){
      const currentState = this.state.active;
      this.setState({ active: !currentState });
  }
  
  handleClick(){
      this.props.delete();
  }
  
  render() {
      return (
              &lt;div className="cardbox"&gt;
                  &lt;div className="cardtitle"&gt;{this.props.title}&lt;/div&gt;
                  &lt;div&gt;{this.props.category}&lt;/div&gt;
                  &lt;div&gt;{this.props.likes / this.props.dislikes}&lt;/div&gt;
                  &lt;i onClick={this.toggleClass} className={this.state.active?"fa fa-thumbs-up":"fa fa-thumbs-down"}&gt;&lt;/i&gt;
                  &lt;button onClick={this.handleClick}&gt;Delete&lt;/button&gt;
              &lt;/div&gt;    
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <p>export default Card</p>