title: How to pass Grandchild data into GrandParent Component without passing data to intermediate components in Reactjs?
body: <p>i have created three components Aboutus,AboutusChild &amp; GrandChild and now i want to pass grandchild state value in my grandparent component that is "Aboutus" component but without using intermediate component(AboutusChild), is it possible in react js without using redux state management library.</p>
  
  <p>i dont' want to use redux right now until some data-communication concept are not clear.</p>
  
  <pre><code>class AboutUs extends Component {
              constructor(props) {
                  super(props)`enter code here`
                  this.state = {
                      childState: false
                  }
              }
              myMehtod(value) {
                  this.setState({
                      childState: value
                  })
              }
              render() {
                  console.log('AboutUs', this.state.childState)
                  return (
                      &lt;div&gt;
                          &lt;h1 className={`title ${this.state.childState ? 'on' : ''}`}&gt;
                              About us {this.props.aboutusProp}
                          &lt;/h1&gt;               
                          &lt;AboutUsChild /&gt;
                      &lt;/div&gt;
                  )
              }
          };
      class AboutUsChild extends Component {
      myMehtod(value) {
          this.setState({
              childState: value
          },
              this.props.myMehtodProp(!this.state.childState)
          )
  
      }
      render() {
          console.log('AboutUsChild', this.state.childState)
          return (
              &lt;div&gt;
                  &lt;h1 className={`title ${this.state.childState ? 'on' : ''}`}&gt;About Us Child&lt;/h1&gt;
                  &lt;GrandChild&gt;
                      without function
                  &lt;/GrandChild&gt;
                  &lt;h1&gt;About Us Child&lt;/h1&gt;
                  &lt;GrandChild Method={true} myMehtodProp={this.myMehtod.bind(this)} /&gt;
              &lt;/div&gt;
          )
      }
  };
      class GrandChild extends Component {
          constructor() {
              super()
              this.state = {
                  TitleClick: false
              }
          }
          TitleClick() {
              this.setState(
                  {
                      TitleClick: !this.state.TitleClick
                  },
                  this.props.myMehtodProp(!this.state.TitleClick)
              )
  
          }
          render() {
              console.log('GrandChild', this.state.TitleClick)
              return (
                  &lt;div&gt;
                      {this.props.Method ?
                          &lt;h1 onClick={this.TitleClick.bind(this)} className={`title ${this.state.TitleClick ? 'on' : ''}`}&gt;Grand Child&lt;/h1&gt;
                          : null}
                      &lt;h1&gt;{this.props.children}&lt;/h1&gt;
                  &lt;/div&gt;
              )
          }
      };
  </code></pre>