title: How do you pass an onClick function to grandchild component in React?
body: <p>I'm just starting out with React, adapting the tic tac toe tutorial for my case.
  I'm trying to click on the grandchild component  to change the state of the grandparent component . Code is as follows:</p>
  <pre><code>class App extends React.Component {
    
    constructor(props) {
      super(props);
      this.state = {
        fields: [
          {
            id: 1,
            show: false
          },
          {
            id: 2,
            show: false
          }
        ]
      }
    }
  
    handleClick(i) {
      const fields = this.state.fields.slice();
      fields[i].show = true;
      this.setState({fields: fields});
    }
    
    render() {return &lt;Preview /&gt;}
        
  }
  
  const Preview = (props) =&gt; {
    
    return (
      &lt;div className=&quot;preview&quot;&gt;
        {props.fields.map((field) =&gt; (
          &lt;Field data={field} key={field.id} onClick={ props.onClick(field.id) }/&gt;
        ))}
      &lt;/div&gt;
    );
  };
  
  const Field = props =&gt; {
    
    return (
      &lt;div className=&quot;field&quot; onClick={ props.onClick } /&gt;
    );
  };
  </code></pre>
  <p>I get a TypeError: Cannot read property 'state' of undefined from this line:</p>
  <pre><code>handleClick(i) {
  const fields = this.state.fields.slice();
  </code></pre>