two-level method pass in React

1parent.js

import Child from './Child';
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props){
    super(props);
      this.state={
        trueOrfalse: true,
      };
    this.method = this.method.bind(this);
  }

  method(e){
    this.setState({
      trueOrfalse: true ? false : true,
    });
    console.log("true or false: ", this.state.trueOrfalse);
    console.log("data: ", e);

  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Child passedMethod={this.method} data={"trash data"}/>
      </div>
    );
  }
}

export default App;

2child.js

import Grandchild from './Grandchild';
import React, { Component } from 'react';
import './App.css';

class Child extends Component {
  render() {
    return (
      <div>
        <p>Text from inside child</p>
        <Grandchild passedMethod={this.props.passedMethod} passedData={this.props.data}/>
      </div>
    );
  }
}

export default Child;

3grandchild.js

import React, { Component } from 'react';
import './App.css';

class Grandchild extends Component {
  render() {
    return (
      <div>
        <p onClick={() => this.props.passedMethod(this.props.passedData)}>Text from inside Grandchild</p>
      </div>
    );
  }
}

export default Grandchild;

This test app works, passing the parent method through the child component and to the grandchild.