React .map method & JSX

state = {
  rooms: ['room1', 'room2', 'room3']
}

joinRoom = (room) => { /* some code */ }

render() {
  return (
    {this.state.rooms.map((room) => (
       <div className="list">
          <p>{room}</p>
          <button onClick={({room}) => this.joinRoom({room})} >
              Join room
          </button>
       </div>
    ))}
  )
}

OK, I want to pass room string from state.rooms array as an argument to onClick function, so that function executes with ‘room1’ for example, but this passes object { room: room } instead of ‘room1’.

How to pass argument correctly?

I was under the impression that your code should be throwing errors and that you wouldn’t even see the UI rendered as it is now because you are not actually returning a list of React elements—removing the curly brackets would be a good start (unless it’s not your actual code and it’s transcription error).

Anyway, you are getting { room: room } because that’s exactly what you are passing into the callback—simply passing room into the function as follows is what you want to do:

<button onClick={() => this.joinRoom(room)}>
  Join room
</button>

You only need curly brackets when you are passing JavaScript as props—hence the curly brackets around {() => this.joinRoom(room)}. Since the extra curly brackets you had around room is treated as JavaScript, { room } is simply the object { room: room } (ES6 shorthand).

1 Like

Thanks for reply, I just realized it was stupid mistake when I saw that I was actually passing object instead of variable… :grimacing:

It happens! Happy coding! :smile: