Question

0

87

Vistas

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 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

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