Why is the onClick beeing called without clicking when rendered in a list?

Question

How do i prevent the OnClick function within the buttom from beeing called whenever the list is rendered?


   {this.state.citylist && this.state.citylist.map((city, index) => 
       <li key={index}>
          {city.name}
          <button type="button" onClick={console.log(city.name)}>Click me</button>
       </li>
   )}

as always, thanks for your help.

You're executing the function immediately. Wrap it in a `callback`: `() => console.log(city.name)` — Dupocas, Oct 10 '19 at 12:18

score 0 · Answer 1 · answered Oct 10 '19 at 12:22

console.log(city.name) is a statement. onClick expects a function.

You can wrap it in a function, inline or declare it elsewhere in the code a and give the reference to onClick.

<button type="button" onClick={() => console.log(city.name)}>Click me</button>

score 0 · Answer 2 · answered Oct 10 '19 at 12:22

An onClick accepts a function as its parameter. Not a function call. So a function that will be called. Which is called a callback.

 onClick={function(){console.log('This will be called')}}

console.log() , is a function call. You're invoking the log method which belongs to the console object.

score 0 · Answer 3 · answered Oct 10 '19 at 12:23

0

OnClick takes a callback/function to be invoked when click event occurrs so add your code inside function and your are good to go

<button onClick={() => console.log(city.name)} >Button</button>

answered Oct 10 '19 at 12:23

Zohaib Ijaz

19,906
6
35
55

score 0 · Answer 4 · answered Oct 10 '19 at 12:25

You need to wrap it in an annon function. An annon function is a function with no name, and can infact be declared inline:

() => {}

This will work in most cases, but some times you might need to pass arguments inside of it in es5 because you cant make use of lexical 'this'

Why is the onClick beeing called without clicking when rendered in a list?

4 Answers4