Reactjs - How to pass an array to a function?

Question

I have a component that creates buttons with information from an array, when the user clicks on the button I want to pass the information from this array to a function, but I'm getting '[Object Object]', how do I pass the array and access the elements in the function?

Function:

handleClick (e) {
        const { value } = e.currentTarget
        console.log(value)
    };

Component render:

render () {
        return (
            <div>
                {this.state.enrollments.map(item => (
                    <div key={item.id}>
                        <button value={item} onClick={this.handleClick}>
                            {item.enrollment}
                        </button>
                     </div>
                ))}
            </div>
        )
    }

Array passed to map:

0: {id: 1, evaluation_flag: false, enrollment: "2019.1", user_id: 2}
1: {id: 2, evaluation_flag: false, enrollment: "2019.2", user_id: 2}

In the handleClick function I want to access the values, type: value.id or value.user_id.

Victor · Accepted Answer · 2018-12-25 21:45:57Z

6

You can create an arrow function if you want, and your code would become:

<button value={item} onClick={(e) => this.handleClick(e, item)}>
  {item.enrollment}
</button>

And then obviously modify the handleClick function to accept a second parameter, item.

Basically, what the (e) => handleClick(e, item) does is create the following function in place:

function (e) {
  return handleClick(e, item);
}

edited Dec 25, 2018 at 21:45

answered Dec 25, 2018 at 21:39

Victor

14.7k24 gold badges87 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bronkula Over a year ago

Your example is missing a closing paren. onClick={(e) => this.handleClick(e, item)}

Hiago Bonamelli Over a year ago

I exclude the value to stay clean, <button onClick={(e) => this.handleClick(e, item)}>. Worked very well!!

Collectives™ on Stack Overflow

Reactjs - How to pass an array to a function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related