title: React function with onClick event throws "TypeError: Cannot read property 'handleDelete' of undefined" in console
body: <p>I'm currently trying to learn React from this <a href="https://www.youtube.com/watch?v=iUPWpXsmuaM&amp;index=11&amp;list=PL4cUxeGkcC9i0_2FF-WhtRIfIJ1lXlTZR" rel="nofollow noreferrer">Youtube Tuorial</a>, however, they are outdated (made in 2016).</p>
  
  <p><strong>Expected result</strong></p>
  
  <p>If I click on a <code>&lt;span&gt; x &lt;span&gt;</code>, the browser console should display a <code>console.log("helloo")</code></p>
  
  <p><strong>Issue:</strong></p>
  
  <p>My current issue is, that after i transpiled my react code, chrome developer console log throws this error:
  <a href="https://i.stack.imgur.com/ooxF7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ooxF7.png" alt="enter image description here"></a></p>
  
  <p><strong>This is my filetree:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/PjjOz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PjjOz.png" alt="enter image description here"></a></p>
  
  <p><strong>This is my index.js file:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  import TodoItem from './todoItem'; 
  
  class TodoComponent extends React
    .Component {
      constructor(props) {
        super(props);
        this.state = {
          todos: ["clean up", "walk doggo", "take nap"]
        };
      }
      render() {
  
  
  
        return (
        &lt;div&gt;
          &lt;h1&gt;The todo list:&lt;/h1&gt;
          &lt;ul&gt;
            &lt;TodoItem todos={this.state.todos}/&gt;
          &lt;/ul&gt;
        &lt;/div&gt;);
      }
  
    }
  
    ReactDom
    .render(&lt;TodoComponent /&gt;, document.querySelector(".todo-wrapper"));
  </code></pre>
  
  <p><strong>And my todoItem.js file:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  
  export default class TodoItem extends React.Component {
  
    handleDelete(){
      console.log("Hellooo");
    };
  
    render() {
  
      let todos = this.props.todos;
  
      todos = todos.map(function(item, index) {
        return (
        &lt;li&gt;
          &lt;div className="todo-item"&gt;
            &lt;span className="item-name"&gt;{item}&lt;/span&gt;
            &lt;span className="item-remove" onClick={this.handleDelete}&gt; x &lt;/span&gt;
          &lt;/div&gt;
        &lt;/li&gt;);
      });
  
      return (&lt;React.Fragment&gt;{todos}&lt;/React.Fragment&gt;)
    };
  }
  </code></pre>
  
  <p>I've been using Stackoverflow, reddit and Google to solve this issue, but most results, who show up, are explaining why "this" is not accessed within the function and is solved by binding it within the constructor. However, I'm not using any this within the function, i just want to console.log("hello") to see if it works.</p>
  
  <p>Thanks for the help and time taken!</p>