title: How to handle on change for an input in reactjs?
body: <p>I have a component UserInput and its used in App component(class based.) Now i am not able to render the onChange event in my html</p>
  
  <pre><code>import React from 'react';
  
  
  const userInput =(props) =&gt;{
      return(
          &lt;input  onChange={props.changed} /&gt;
      );
  };
  
  export default userInput;
  
  </code></pre>
  
  <p>My app component looks like this.</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import UserInput from './UserInput/UserInput';
  import UserOutput from './UserOutput/UserOutput';
  
  class App extends Component{
  constructor(props) {
      super(props);
          this.state = { userName: "dssdf" };
          this.handleChange = this.handleChange.bind(this);
  
      }
      const handleChange = (event) =&gt;{
              this.setState({
                  userName: event.target.value
              })
          }
  
      render(){
  
          return(
              &lt;div &gt;
                  &lt;UserInput changed={this.handleChange} /&gt;
                  &lt;UserOutput userName={this.state.userName} /&gt;
  
              &lt;/div&gt;
          )
      }
  }
  
  export default App;
  
  
  
  </code></pre>
  
  <p>Any help is appriciated.</p>
  
  <p>Thanks</p>