title: how to add multiple onChange in react for single input element
body: <p>I'm having a trouble of handling <code>state-management</code> and <code>event management</code> together on a single input element. </p>
  
  <pre><code>    import React, { Component } from 'react';
  
  export class profileDetail extends Component {
      continue = (e) =&gt; {
          e.preventDefault();
          this.props.nextStep();
      };
  
      back = (e) =&gt; {
          e.preventDefault();
          this.props.prevStep();
      };
      render() {
          const { values, handleChange } = this.props;
  
          const imageHandler = () =&gt; {
  
              //Do this thing..
              //make this magic happen...
          };
          return (
              &lt;div&gt;
                  Add your Profile Picture:
                  &lt;input
  -----HERE------&gt;    onChange={handleChange('ProfilePic')}
        &amp;             defaultValue={values.ProfilePic}
  -----HERE------&gt;    onChange={imageHandler}
                      type="file"
                      name="inpFile"
                      id="inpFile"
                      accept="image/*"
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default profileDetail;
  </code></pre>
  
  <p>if i add two <code>onChange</code> on single input as above either i happen to get the state management working or either its the DOM manipulation with the onchange that gets working but not the both.
  <br><br>
  So, how and what changes should i make to get it working properly? </p>