onChange event inside loop is only passing 0th index-CodePudding

The following code is a input component which uploads an image and I am using a function "handleImageChange" to trigger onChange event. it is inside a loop

{images.map((x,i) => (
    <Grid item>
           <Input
              accept="image/*"
              id="change-image-file"
              required
              type="file"
              onChange={(e) => handleImageChange(e, i)}
           />
    </Grid>
)}

 const handleImageChange = (e, index) =>{
       conole.log(index)   // whichever index I click it always returns 0
       conole.log(e.target.files[0])  // however e.target.value works alright
 }

I am using React 18, Material UI 5, and the "Input" & "Grid" is from material UI which resembles HTML "input" & "div" respectively.

CodePudding user response：

move your <Grid> outside map and than try


<Grid item>
     {images.map((x,i) => (

           <Input
              accept="image/*"
              id="change-image-file"
              required
              type="file"
              onChange={(e) => handleImageChange(e, i)}
           />
     )}
</Grid>

CodePudding user response：

As Aman suggests, first move your Grid outside loop. Second thing you should change is that you need to provide dynamic key and id to each element, like this you declare same id to each element and no key at all - React core principle relays on keys when working with loop that outputs component instances.

You should try something like this:

<Grid item>
 {images.map((x,i) => (

       <Input
          key={`k-${i}`}
          id={`i-${i}`}
          accept="image/*"
          required
          type="file"
          onChange={(e) => handleImageChange(e, i)}
       />
 )}