0

https://codesandbox.io/s/todo-4yo7h?file=/src/App.js
Why is ToggleComplete(index) function is triggering this error?

Too many re-renders. React limits the number of renders to prevent an infinite loop.

I put onClick on li tag, which means only trigger that function when clicked, but as soon as todo list is entered I get this render issue.
I'm just trying to strike though todo list when clicked by setting isCompleted = true.
What am I doing wrong?

Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
Judoboy Alex
  • 326
  • 1
  • 14
  • 3
    Please read [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it). Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a [MCVE] and put it in **the question itself** instead. Stackoverflow does support [inline live demos](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) – Quentin Oct 17 '20 at 17:00
  • Also duplicate: https://stackoverflow.com/questions/7137401/why-is-the-method-executed-immediately-when-i-use-settimeout – Quentin Oct 17 '20 at 17:00

2 Answers2

0

You're calling the function immediately, try

<li
   key={index}
   index={index}
   onClick={() => toggleComplete(index)} // use an arrow function, or else it will be triggering itself
   style={{ textDecoration: todo.isCompleted ? "line-through" : "" }}
>
kennysliding
  • 2,783
  • 1
  • 10
  • 31
0

I worked on debugging it. Use this

onClick={() => toggleComplete(index)}

Your function will only fire when it is clicked.

Full Code: https://codesandbox.io/s/todo-forked-bv978?file=/src/App.js

Fahad Shinwari
  • 968
  • 7
  • 7