-1

I am new to frontend and I am trying to implement a simple feature where: retrieve a list of cities, render a button for each city and catch the click action of them individually

I am getting the list like this:

this.state.favCts: ['Sydney', 'melbourne', 'tokyo', 'bankok']

and rendering the buttons like this

<div className="column">
                    {this.state.favCts.map(
                        (item, index) => 
                             <button key={index} onClick = {console.log("show fav city" + item)}>{item}</button>
                    )}
</div>

however the buttons will be clicked twice when they are being rendered, and won't log anything if I click them afterwards

G lau
  • 1
  • 2

1 Answers1

1

Make this changes: <button key={index} onClick={() => console.log("show fav city" + item)}>{item}</button>

HyderYash
  • 46
  • 7