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

https://codepen.io/silentarrowz/pen/GEMQEP?editors=0010

and here's the 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(

      <div>

        <h1>Passing props from Child to Parent Component</h1>

        <Child getInput={this.handleInput} />

        here's the input: {this.state.input}

        </div>

    );

  }

 }



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(

      <div>

      <input type=text placeholder=please input a name... onChange={this.passingProps} />



        </div>



    )

  }

}



ReactDOM.render(

  <App/>,

  document.getElementById('app')

);