title: React : Uncaught TypeError: Cannot read property 'remove' of undefined
body: <p>I have a problem with my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Note extends React.Component{
    constructor(props){
      super(props);
    }
    xoa(){
      var {index, handleRemove} = this.props;
      handleRemove(index);
    }
    render(){
      return(
        &lt;div&gt;
          &lt;p&gt;{this.props.children}&lt;/p&gt;
          &lt;button onClick={this.xoa.bind(this)}&gt; Delete &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  class List extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        arrayNote: ['ha', 'hi', 'hu']
      };
    }
    remove(index){
      this.state.arrayNote.splice(index, 1);
      this.setState(this.state);
    }
    render(){
      this.remove = this.remove.bind(this);
      return(
        &lt;div&gt;{this.state.arrayNote.map(function(note, i){
            return (&lt;Note index={i}
              handleRemove={this.remove}
              key={i}&gt;{note}&lt;/Note&gt;)
          })}
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;List /&gt;,
    document.getElementById("root")
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In console it shows: TypeError: Cannot read property 'remove' of undefined and Uncaught TypeError: Cannot read property 'remove' of undefined
  Help me resolve this problem, please!
  Thanks.</p>