从 React Hooks 中的购物项目中删除项目

Question

While working on a Codecadamy exercise on React Hooks, I came across a code that I couldn't understand.

Check this in the following code: onClick={() => removeItem(index)}

 <ul>{cart.map((item,index) => <li key={index} onClick={() => removeItem(index)} >{item}</li>)}</ul>

Why can't we simply write: onClick={removeItem(index)} // When I tried doing it, the code didn't work.

While I have completed the code, I can understand the difference between onClick={removeItem(index)} and onClick={() => removeItem(index)} .

In the same code, following example worked well (when I tried to add the item in a list.)

{produce.map((item) => <button key={item} value={item} onClick={addItem}>{item}</button>)};

In the above example, onClick={addItem} worked well.

Here is complete code: https://gist.github.com/sixpl/8141196fc688949ccb51b4459e645b34

Thank you for your time.

Answer 1

While using {removeItem(argument)} , you are actually making a function call. The JSX expression (what you have mentioned inside inside { } ) will get evaluated and this function will be called. Wrapping it inside a function ensures that the we are indicating what to call on click but not calling it. Ex: {()=>{ yourActualFunctionCall(argument) }}

While using {addItem} , you are indicating that the function to be called on click is addItem . Notice, there is no ( ) after the function, so the addItem will not be called.