Question

0

88

Views

Why doesn't React render an element without function invoked by arrow function unlike normal onClick functions?

Why does this work?

<span onClick={()=>removeTodo(index)}>x</span>

But this doesn't work?

<span onClick={removeTodo(index)}>x</span>

Full code

{todo.map((item, index) => {
  return (
    <pre className={index} key={index}>
      <h1 id={array}>{item}</h1>
      <span onClick={()=>removeTodo(index)}>x</span>
    </pre>
);
})}

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-25T19:06:11.283Z

The onClick function requires a short hand function syntax ()=>{} especially when you are calling a function and passing the parameters at the same time. It is also used when you are calling multiple functions inside onClick.

When to Use ()=> in onClick?

Calling a function with a parameter
Calling multiple function in a single onClick
Providing a function definition inside onClick

When not to use?

Calling a function without a parameter