title: passing data from child to parent component - react - via callback function
body: <p>passing data from child to parent component via callback function
  but somehow it's not working.
  what am I doing wrong here?
  passing data from child to parent component - react - via callback function</p>
  
  <p><a href="https://codepen.io/silentarrowz/pen/GEMQEP?editors=0010" rel="noreferrer">https://codepen.io/silentarrowz/pen/GEMQEP?editors=0010</a></p>
  
  <p>and here's the code</p>
  
  <pre><code>class App extends React.Component{
      constructor(props){
        super(props);
        this.state={
          input:'this is the input for now'
        }
     //this.handleInput=this.handleInput.bind(this);   
      }
  
      handleInput(x){
        this.setState({
          input:x
        });
        alert(this.state.input);
      }
  
    render(){
      return(
        &lt;div&gt;
          &lt;h1&gt;Passing props from Child to Parent Component&lt;/h1&gt;
          &lt;Child getInput={this.handleInput} /&gt;
          here's the input: {this.state.input}
          &lt;/div&gt;
      );
    }
   }
  
  class Child extends React.Component{
    constructor(){
      super();
      this.state={
        text:''
          }
      }
    passingProps(e){
      var newInput=e.target.value;
      //alert(newInput);
     this.setState({
       text:newInput
      });
    this.props.getInput(this.state.text);
    }
  
    render(){
      return(
        &lt;div&gt;
        &lt;input type="text" placeholder="please input a name..." onChange={this.passingProps} /&gt;
  
          &lt;/div&gt;
  
      )
    }
  }
  
  ReactDOM.render(
    &lt;App/&gt;,
    document.getElementById('app')
  );
  </code></pre>