无法从子组件中获取 map 索引的值以在 React 中作为 function 参数传递

Question

This is the first project I'm building in react so i apologise for any errors.

I have three components in React. The method is declared in the top level with two parameters. I pass this method to a child component. In this component I want to call the method inside a map, using the index of the map as an argument. Here is the code:

class App extends Component {
 constructor() {
    super();
    this.state = {
       workExperience: [
          { points: [{id: 1, point: "firstPoint"}, {id: 2, point: "secondPoint"}]
       ]
    }
    this.captureTask = this.captureTask.bind(this);
}

captureTask(e, index){
//clone state, want to access array using map index in child component below and capture value of the input to update this state
clonedState.points[index] = e.target.value
console.log(index) //undefined
}

render(){
   return(
       <ChildComponent captureTask={(e, index) => this.captureTask(e, index)} />
   )
}


class ChildComponent extends Component {
    constructor(props){
        super()
}

render(){
    return(
          <div>
               {this.props.points.map((point, index) => {
                   return <Input key={point.id} handleChange={(e, index) => this.props.captureTask(e, index)} />
                })}
           </div>
     )
}

My issue is in the captureTask method. The index value returns undefined when it gets back to the function. However within the Map I'm able to log index value without any issue. Is there something I should be doing differently in order to be able to use the map index as an argument in a parent method?

Thanks for any help.

Answer 1

Change the handleChange prop to the following:

handleChange = { (e) => this.props.captureTask(e, index) }

ie Remove the index from the arguments list of the arrow function.