title: Get value of input and give to parent in React
body: <p>I have the following two components <strong>App</strong> and it's child <strong>Toolbar</strong>.</p>
  
  <p>Toolbar contains a form and and input, and I would like to pass the value from the input up to the App component's state -- but only when the use has confirmed it (on submit or enter etc).</p>
  
  <p>My current attempt is not working as I only get a proxy and an event object back (which does makes sense). How would I do this?</p>
  
  <p>I am not using Redux or anything like it.</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, {Component} from 'react'
  import {render} from 'react-dom'
  import {} from './styles/base.scss'
  
  import ImageContainer from './components/Images'
  import Toolbar from './components/Toolbar'
  
  export default class App extends Component {
      constructor(props) {
          super(props);
          // http://www.cloudypoint.com/Tutorials/discussion/javascript-how-to-update-parents-state-in-react/
          this.setFolderPathHandler = this.setFolderPathHandler.bind(this);
      }
  
      setFolderPathHandler(e) {
          e.preventDefault();
          console.log(arguments);
          // this.setState({
          //     xyz: input
          // });
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Toolbar setFolderPathHandler={this.setFolderPathHandler} /&gt;
                  &lt;ImageContainer /&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p><strong>Toolbar/index.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import path from 'path';
  
  class Toolbar extends Component {
      render() {
          return (
              &lt;nav className="toolbar"&gt;
                  &lt;div className="column"&gt;
                      {/* START used to be it's own component */}
                      &lt;form onSubmit={this.props.setFolderPathHandler}&gt;
                          &lt;div className="form-field"&gt;
                              &lt;input type="text" className="folder-path" ref={(input) =&gt; this.input = input} /&gt;
                              &lt;button&gt;&lt;i className="fa fa-fw fa-2x fa-folder-open" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                      {/* END used to be it's own component */}
                  &lt;/div&gt;
                  &lt;div className="column"&gt;
                      &lt;button&gt;&lt;i className="fa fa-fw fa-2x fa-chevron-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;button&gt;&lt;i className="fa fa-fw fa-2x fa-chevron-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          );
      }
  }
  
  export default Toolbar;
  </code></pre>
  
  <p>I did have the input as a separate component but it was too confusing to me (I am new to React).</p>