title: Get index value from function calling in onChange input element
body: <p>I am developing an application in React. I have a parent element wherein I have a child component(Photo) which needs to rendered multiple times(7 in below case). So I have used .map and allPhotos variable is rendered in return function.  </p>
  
  <p>Parent Component : </p>
  
  <pre><code>handlePhotos = (event, isSingleMulti, photoIndex) =&gt; {
      console.log("Upload Photo", event.target.files, photoIndex, isSingleMulti);
  }
  openFileDialog(isSingleMulti, photoIndex) {
      isSingleMulti === 'M' ? document.getElementById('multi-photo-input').click() : document.getElementById('single-photo-input').click();
  }
  
  let photosTemp = [1,2,3,4,5,6,7];
  let allPhotos = photosTemp.map(ele =&gt; {
  
      return &lt;Photo key={ele} photoBoxID={ele} openFileDialog={this.openFileDialog} handlePhotos={this.handlePhotos} onDeletePhoto={this.onDeletePhoto}/&gt;
  });
  </code></pre>
  
  <p>In my Child component (Photo) I have a div, onClick of div I call openFileDialog which internally calls click of hidden input element(#single-photo-input). onChange of input element I call handlePhotos. Both of these functions handlePhotos and openFileDialog are defined in my parent and passed to Child (Photo) as a prop. </p>
  
  <p>Now what I need is that when onChange method handlePhotos is called, I want to return each Photo photoBoxID value. Basically, I want to check which Photo component was clicked. But every time I get value as 1 instead of respective 1,2,3 etc. What wrong am I doing? </p>
  
  <p>Child Component : </p>
  
  <pre><code>const UploadImage = (props) =&gt; {
      console.log(props.photoBoxID);
  
      return (
      &lt;div className="photo-root"&gt;
          &lt;div className="photo-inner-container" onClick={() =&gt; props.openFileDialog('S')}&gt;
              &lt;span className="inner-text"&gt;+&lt;/span&gt;
              &lt;form encType="multipart/form-data" id="single-photo-form"&gt;
                  &lt;input type="file" name="file" id="single-photo-input" className="hide" accept="image/jpg, image/jpeg, image/png" 
                  onChange={(event) =&gt; props.handlePhotos(event, 'S', props.photoBoxID)}/&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      )
  }
  
  class Photo extends React.Component {
  
      render() {
          return (
              true === true ? &lt;UploadImage {...this.props}/&gt; : &lt;ImagePreview {...this.props}/&gt;
          )
      }
  }
  </code></pre>