title: React JS how to pass props from a component to another component
body: <p>I have this react code where I don't know how to do it better.</p>
  <p>I will start like this.</p>
  <p>I have 3 <code>react</code> components as of now, namely <code>Main</code>, <code>Form</code>, <code>NextButton</code></p>
  <p>So my <code>Main</code> component looks like this:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import Form from &quot;./Form&quot;; 
  import NextButton from &quot;./NextButton&quot;;
  
  class Main extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Form /&gt;
          &lt;NextButton /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Main;
  
  </code></pre>
  <p><code>Form</code> contains some Text Fields, <code>First Name</code>, <code>Last Name</code>, <code>Age</code></p>
  <p>And <code>NextButton</code> component contains a <code>react-bootstrap</code> <code>Button</code> just to navigate to the next page with <code>react-router-dom</code>, nothing fancy.</p>
  <p>My problem is:</p>
  <p>I want to pass the value of <code>First Name</code> to the page I render when clicking <code>NextButton</code> through <code>props</code></p>
  <p>So the <code>NextButton</code> would look something like this:</p>
  <pre><code>&lt;NextButton firstname={value-i-get-from-Form-component}/&gt;
  </code></pre>
  <p>I know <code>react</code> only allows one-direction data passing, but I want to make this work. Means If my current setup in the <code>Main</code> component is not right, How should I change it?</p>