带输入onChange的Array.map（）始终获取列表中的最后一项

Question

I have an array of objects in my state that I'm iterating through using map() . Each iteration has two tablerows inside a Fragment, with the second tablerow having an input tag that has an onChange() event that passes the current index to a function. I've noticed that it always passes the last index in the array.

{this.state.billingStatementData.map((row, index) => {
  return (
    <Fragment key={index}>
        <TableRow hover>
            ...
        </TableRow>
        <TableRow>
            <TableCell>
            ...
              <input onChange={() => {
                    console.log(index);
                }}/>
              ...

Is it possible to get the current row or index of the iteration rather than the last item?

Thank you.

Answer 1

Use props on input

<input index={index}...

And you can use this attribute in onChange.