title: React Send child input data to update parent state
body: <p><strong>Setup:</strong> I have set up a two react components in a parent child relationship. The parent has a state that can be changed by press of a button on parent itself. </p>
  
  <p><strong>Expected behaviour:</strong> In the child, I have an input field and I want the state to change to the value I send in the input field on the press of the submit button. I have set up the parent and the child as follows: </p>
  
  <p><strong>What I have tried:</strong> I going through <a href="https://stackoverflow.com/questions/46538183/react-child-component-state-updates-parent-component-state" title="Stack overflow question">this</a> answer and <a href="https://www.youtube.com/watch?time_continue=21&amp;v=AnRDdEz1FJc&amp;feature=emb_title" rel="nofollow noreferrer" title="youtube video">this</a> youtube video but I guess I am not smart enough to make sense of it.</p>
  
  <p>This is what my code looks like
  <strong>Parent:</strong></p>
  
  <pre><code>class App extends Component {
    state = { 
      value:"someValue"
     };
  
     changeValue = (value) =&gt; {
       this.setState({
         value
       })    
     }
  
    render() {
      return (
        &lt;div&gt;
          &lt;p&gt;this is the value from state: {this.state.value}&lt;/p&gt;
          &lt;button onClick={()=&gt;this.changeValue("valueFromParentComponent")}&gt;Press to change value from parent component&lt;/button&gt;
          &lt;br/&gt;&lt;br/&gt;
          &lt;Child getChildInputOnSubmit={()=&gt;this.changeValue()} /&gt;
        &lt;/div&gt;      
      );
    }
  }
  </code></pre>
  
  <p>And this is what the child looks like</p>
  
  <p><strong>Child:</strong></p>
  
  <pre><code>class Child extends Component {
      state = {
  
      }
      sendChildData = (childInputValue) =&gt; {
          console.group("This is the data from the input of the child component")
          console.log("==============")
          console.log(childInputValue)
          console.log("==============")
      }
  
  
      render() {
          return (
              &lt;div&gt;
                  This is the child component
              &lt;br /&gt;&lt;br /&gt;
                  &lt;form&gt;
                      &lt;input type="text" placeholder="Some placeholder"&gt;&lt;/input&gt;
                      &lt;button onSubmit={this.sendChildData()} type="submit"&gt;Send child's input to parent&lt;/button&gt;
                  &lt;/form&gt;
  
              &lt;/div&gt;);
  
      }
  }
  </code></pre>