title: Parent not Successfully Retrieving Data from Child
body: <p>I have a callback function in a parent component passed to an child component that should retrieve the input once submission in the child component takes place but is not working as expected. No data is being retrieved by the parent. Here is my code:</p>
  
  <p>Parent:</p>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props)
       this.state = { item: '' }
    }
  
    getItem(item) {
      this.setState({
        item: item
      })
      console.log(this.state.item);
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
        &lt;Input getItem={this.getItem} /&gt;
        &lt;h2&gt;{this.state.item}&lt;/h2&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Child:</p>
  
  <pre><code>class Input extends Component {
    constructor(props) {
      super(props)
  
      this.state = { value: '' }
      this.handleChange=this.handleChange.bind(this);
      this.handleSubmit=this.handleSubmit.bind(this);
    }
  
    handleChange(e) {
      this.setState({
        value: e.target.value
      })
      console.log(this.state.value)
    }
  
    handleSubmit(e) {
      {this.props.getItem(this.state.value)};
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;label&gt;
              &lt;input type="text" name={this.state.value} onChange={this.handleChange} /&gt;
            &lt;/label&gt;
            &lt;input type="submit" value="+" /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>