title: calling grandparent method from grandchild functional component in react
body: <p>I'm trying to call a simple method from the grandparent component in my child component but from some reason I can't  ,  I tried every possible way but I think I'm missing something
  here's the full code : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import './App.css';
  
  var todos = [
    {
      title: "Example2",
      completed: true
    }
  ]
  const TodoItem = (props) =&gt; {
    return (
      &lt;li 
      className={props.completed ? "completed" : "uncompleted"}
      key={props.index} onClick={props.handleChangeStatus}
      &gt;
      
      {props.title}
      &lt;/li&gt;
    );
  }
  class TodoList extends Component {
    constructor(props) {
      super(props);
      
  
    }
    render () {
      return (
      &lt;ul&gt;
        {this.props.todosItems.map((item , index) =&gt; (
          &lt;TodoItem  key={index} {...item} {...this.props} handleChangeStatus={this.props.handleChangeStatus}  /&gt;
        ))}
      &lt;/ul&gt;
    );
    }
    
  }
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        todos ,
        text :""
      }
      this.handleTextChange = this.handleTextChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleChangeStatus = this.handleChangeStatus(this);
  
    }
    handleTextChange(e) {
      this.setState({
        text: e.target.value
      });
    }
    handleChangeStatus(){
      console.log("hello");
    }
    handleSubmit(e) {
      e.preventDefault();
      const newItem = {
        title : this.state.text , 
        completed : false
      }
      this.setState((prevState) =&gt; ({
        todos : prevState.todos.concat(newItem),
        text : ""
      }))
    }
    render() {
      
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Todos &lt;/h1&gt;
          &lt;div&gt;
            &lt;form onSubmit={this.handleSubmit}&gt;
              &lt; input type="text" onChange={this.handleTextChange} value={this.state.text}/&gt;
            &lt;/form&gt;
            
          &lt;/div&gt;
          &lt;div&gt;
            &lt;TodoList handleChangeStatus={this.handleChangeStatus} todosItems={this.state.todos} /&gt;
          &lt;/div&gt;
          &lt;button type="button"&gt;asdsadas&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The method im trying to use is handleChangeStatus() from the App component in the TodoItem component </p>
  
  <p>Thank you all for your help</p>