如何访问映射函数中的变量值？

Question

In my React app I am populating table rows with data from an array.

Below, I want to be able to access the value of the notes variable when the year td is clicked

rows.map((row) => {
                        return <tr key={row.id}>
                            <td>{row.start}</td>
                            <td>{row.end}</td>
                            <td  onClick={(row) => console.log(row.year)}>{row.year}</td>
                            <td>{row.notes}</td>
                            <td/></td>
                        </tr>
                    })

When I click this td which has 1999 on screen undefined is output to the console.

Can someone help me understand how I can access this value?

Answer 1

This code fails, why?

rows.map((row) => {
                        return <tr key={row.id}>
                            <td>{row.start}</td>
                            <td>{row.end}</td>
                            <td  onClick={(row) => console.log(row.year)}>{row.year}</td>
                            <td>{row.notes}</td>
                            <td/></td>
                        </tr>
                    })

concretely, onClick={(row) => console.log(row.year)}

You are assuming that when you do click you get row as a parameter in the onClick callback, what you get there is the event. So, your row param is an event which does not have year for that reason you see undefined .

Solution :

Just remove row .

onClick={(clickEvent) => console.log(row.year)}

In your arrow function, you have access to the row object.

Answer 2

Create a function like so:

accessNotes(notes) {
console.log(notes)
}

And in your Html do like this:

rows.map((row) => {
                    return <tr key={row.id}>
                        <td>{row.start}</td>
                        <td>{row.end}</td>
                         // You don't need to pass row
                        <td  onClick={() => {
                                      console.log(row.year);
                                      // here you call the function
                                      this.accessNotes(row.notes)
                                       }}>{row.year}</td>
                        <td>{row.notes}</td>
                        <td/></td>
                    </tr>
                })

Answer 3

You're accessing the year on event object rather than the row. The first argument passed to onClick function is the event object which you have also named row ( also known as shadowing ). Name it something else like event or e or simply omit it if you don't want to access the event. Do this.

rows.map((row) => {
    return <tr key={row.id}>
        <td>{row.start}</td>
        <td>{row.end}</td>

        <td onClick={(e) => console.log(row.year)}>{row.year}</td>

        <td>{row.notes}</td>
        <td/></td>
    </tr>
})

Hope this helps !