0
351
ViewsonChange event inside loop is only passing 0th index
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.
·
Juan Pablo Isaza
2 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
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)}
/>
)}
·
Juan Pablo Isaza
Report
Answer question