title: Transferring Props to Multi-Level Upward in React Child-Parent Components
body: <p>I have 3 React components with such relationship:</p>
  
  <ol>
  <li>Parent</li>
  <li>Child</li>
  <li>ChildofChild</li>
  </ol>
  
  <p>I want to have a button in <code>ChildofChild</code> component, when clicked to update state in <code>Parent</code> component. I can send it to <code>Child</code> component via props and run a fuction there.</p>
  
  <p><strong>ChildOfChild</strong></p>
  
  <pre><code>// ChildOfChild Component
  export class PlaceInfoWindow extends Component {
  
    render() {
      const {description, name, price} = this.props
  
      return(
        &lt;InfoWindow onCloseClick={this.props.closeWindow}&gt;
          &lt;div&gt;
            &lt;h1&gt;{name}&lt;/h1&gt;
            &lt;p&gt;{description}&lt;/p&gt;
            &lt;span&gt;${price}&lt;/span&gt;
            &lt;button type="button" onClick={this.props.onAdd} className="btn btn-primary btn-success m-2"&gt;Add&lt;/button&gt;
          &lt;/div&gt;
        &lt;/InfoWindow&gt;
      );
    }
  }
  
  export default PlaceInfoWindow
  </code></pre>
  
  <p><strong>Child</strong>    </p>
  
  <pre><code>//Child Component
      export class PlaceMarker extends Component {
        constructor(props) {
          super(props);
  
          this.state = {
            showTooltip: false,
          };
        }
  
        clickTooltip() {
          this.setState({ showTooltip: !this.state.showTooltip });
        }
  
        closeWindow() {
          this.setState({ showTooltip: false });
        }
  
         render() {
          const { showTooltip } = this.state;
          const { lat, lng, name, price, description } = this.props;
  
          return (
            &lt;Marker
              position={{
                lat: parseFloat(lat),
                lng: parseFloat(lng)
              }}
              onClick={this.clickTooltip.bind(this)}
              icon="https://image.ibb.co/cGPSW8/red_marker.png"
            &gt;
              {showTooltip &amp;&amp; (
                &lt;PlaceInfoWindow
                  description={description}
                  name={name}
                  price={price}
                  closeWindow={this.closeWindow.bind(this)}
                  onAdd={this.props.onAdd}
                /&gt;
              )}
            &lt;/Marker&gt;
          );
        }
      }
  
      export default PlaceMarker;
  </code></pre>
  
  <p><strong>Parent</strong></p>
  
  <pre><code>// Parent Component
  const AirbnbMap = withGoogleMap(props =&gt; (
    &lt;GoogleMap
      defaultCenter={props.center}
      defaultZoom={props.zoom}
      defaultOptions={{
        styles: userMapStyle
      }}
    &gt;
      {props.places.length &gt; 0 &amp;&amp;
        props.places.map(place =&gt; (
          &lt;PlaceMarker
            key={`place${place.id}`}
            id={place.id}
            lat={place.latitude}
            lng={place.longitude}
            description={place.description}
            name={place.name}
            price={place.price}
            onAdd={this.handleAdd}
          /&gt;
        ))}
    &lt;/GoogleMap&gt;
  ));
  
  export class Map extends Component {
    constructor(props) {
      super(props);
  
      this.zoom = 7;
  
      this.state = {
        lat: 50.0515918,
        lng: 19.9357531,
        places: [       
          {
          id: 1,
          latitude: 50,
          longitude: 20,
          description: "ABC",
          name: "City",
          price: 20
        }]
      };
    }
  
  
    handleAdd = () =&gt; {
      console.log("handle add called");
    };
  
    render() {
      const { lat, lng, places } = this.state;
      console.log(places);
      return (
        &lt;div style={{ width: `100%`, height: `750px` }}&gt;
          &lt;AirbnbMap
            center={{
              lat: lat,
              lng: lng
            }}
            places={places}
            zoom={this.zoom}
            containerElement={&lt;div style={{ height: `100%` }} /&gt;}
            mapElement={&lt;div style={{ height: `100%` }} /&gt;}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Map;
  </code></pre>
  
  <p>But how can I send it to <code>Parent</code>(two levels up) component? In this way, <code>Child</code> component will only forward the props to the <code>Parent</code> component, which it took from its child (<code>ChildofChild</code>).</p>