title: onchange input and set state not working?
body: <p>I'm working on simple form element using react-js.</p>
  
  <p>There are three component:</p>
  
  <ol>
  <li>App</li>
  <li>TakeInput</li>
  <li>Index</li>
  </ol>
  
  <p>problem is when user put text in input field setState() function not work properly and data not updated. For testing purpose when i'm placing console.log in app js component it shows undefined on console. anyone sort this please. I want to console the updated data when state update</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import InputField from './TakeInput';
  
  class App extends Component {
    state = {
      userInp : '',
      outText : ''
    }
    handlechanger2 = (v) =&gt; {
      this.setState( () =&gt; ({
        userInp: v,
      }))
  
      console.log(this.userInp);
    }
  
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;InputField changingVal={this.handlechanger2}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>TakeInput.JS</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class TakeInput extends Component{
      state={
          txt: ''
      }
  
      handlerChange = (e)=&gt;{
          const { changingVal } = this.props;
          const v = document.getElementById("userInput").value;
          changingVal(v);
          // console.log(e.target.value);
          this.setState({ txt: e.target.value })
  
      }
  
      render(){
          return(
              &lt;input type="text" name="userInput" id="userInput" placeholder="Please Enter Text" onChange={this.handlerChange} value={this.txt}/&gt;
          )
      }
  
  }
  
  export default TakeInput;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import App from './App';
  
  import * as serviceWorker from './serviceWorker';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  
  serviceWorker.unregister();
  </code></pre>