title: Scroll page to child React component on a button click
body: <p>I have a parent component that renders a child component below the header. The header has a button that, when clicked, should scroll to a section of the corresponding child component. </p>
  
  <p>Right now I am trying to change the state on the button click, and pass this new state as a prop from the parent to the child component. Then, in the child component, I am trying to run the scroll() function using the passed down prop as the identifier of the section I want to scroll to.</p>
  
  <p>Parent component:</p>
  
  <pre><code> handleSelected = event =&gt; {
    this.setState({ selected: event.currentTarget.value });
   };
  
   &lt;Button value="sectionOne" onClick={this.handleSelected} /&gt;
  
   &lt;Child loadSelected={() =&gt; this.state.selected}&lt;/Child&gt;
  </code></pre>
  
  <p>Child component:</p>
  
  <pre><code>  ComponentDidMount() {
     let selected = this.props.loadSelected();
     this.handleNavigate(selected);
    }
  
    handleNavigate = section =&gt; {
      let el = document.getElementById(section);
      window.scrollTo({
        behavior: "smooth",
        left: 0,
        top: el.offsetTop
      });
    };
    ....
    ....
    ....
    &lt;div id="sectionOne" /&gt;
  </code></pre>