Pass value using button from array

Question

I'm learning to use React and I have a problem about how to pass the id using a button.

I have recover data for my fetch from: https://jsonplaceholder.typicode.com/users

My js page:

handleClick(){
    alert("ALERT " + this.props);
}


render(){
    const listMeetings = this.props.meetings.map((meeting) => 
    <li key={meeting.id}>{meeting.name}
    <button key={meeting.id} onClick={() => this.handleClick(meeting.id)} value={meeting.id}>{'Details'}</button>
    </li>);
    return(
        <div>
                   <ul>{listMeetings}</ul>
        </div>
    )
}
}

So at the moment I have a list of name and a button, immediately next to each name. What I would to do is to pass the id of every name, when the button is clicked (at the moment I would print only an alert with the id.

With my code, I have understand that I pass all the array (so I have 10 object).

How can I do? thank you.

Sabbin · Accepted Answer · 2020-04-08 10:38:34Z

1

You have an error in your handleClick you pass the meeting.id as a param but it's missing in the functions declaration

handleClick(id){
  alert("ALERT " + id);
}


render(){
  const listMeetings = this.props.meetings.map((meeting) =>
    <li key={meeting.id}>{meeting.name}
      <button key={meeting.id} onClick={() => this.handleClick(meeting.id)} value={meeting.id}>{'Details'}</button>
    </li>);
  return(
    <div>
      <ul>{listMeetings}</ul>
    </div>
  )
}
}

answered Apr 8, 2020 at 10:38

Sabbin

2,4632 gold badges22 silver badges37 bronze badges

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

1 Comment

Sabbin Over a year ago

@Jack23 it happens to all, don't worry

Elman Huseynov · Accepted Answer · 2020-04-08 10:38:10Z

1

Try anonymous function version instead:

handleClick = (id){
    alert("ALERT " + id);
}

render(){
    const listMeetings = this.props.meetings.map((meeting) => 
    <li key={meeting.id}>{meeting.name}
    <button key={meeting.id} onClick={(id) => this.handleClick(meeting.id)} value={meeting.id}>{'Details'}</button>
    </li>);
    return(
        <div>
                   <ul>{listMeetings}</ul>
        </div>
    )
}

answered Apr 8, 2020 at 10:38

Elman Huseynov

1,1471 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

Pass value using button from array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related