CODEWITHSUNDEEP
javascriptreactjs
Vinyl Warmth
Vinyl Warmth

Reputation: 2516

How can I access a value of a variable inside a map function?

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 tdis 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?

Upvotes: 1

Views: 557

Answers (3)

Hemant Parashar
Hemant Parashar

Reputation: 3774

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 !

Upvotes: 0

Hamza
Hamza

Reputation: 469

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>
                })

Upvotes: 1

F.bernal
F.bernal

Reputation: 2694

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.

Upvotes: 3

Related Questions