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.