Reactjs - How to pass values from child component to grand-parent component?

Question

Below is correct example for passing the values from child component to parent component in reactjs.

App.jsx

import React from \'react         


        

Answer 1

You can pass the update function to the grand child by props, just pass it again from the child component.

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: 'Initial data...'
    }
    this.updateState = this.updateState.bind(this);
  }

  updateState(who) {
    this.setState({data: `Data updated from ${who}`})
  }

  render() {
    return (
      

        Parent: {this.state.data}
        
      
    )
  }
}

class Child extends React.Component {
  render() {
    return (
      

        Child component
         this.props.update('child')}>
          CLICK
        
        
      
    );
  }
}

class GrandChild extends React.Component {
  render() {
    return (
      

        Grand child component
         this.props.update('grand child')}>
          CLICK
        
      
    );
  }
}
ReactDOM.render(, document.getElementById('root'))