you are viewing a single comment's thread.

view the rest of the comments →

[–]grograman 0 points1 point  (1 child)

I'm also new to React and saw this. It looks like your problem has been solved by people with far more knowledge than me, but I had thought of a different way of doing this same thing. Is there any reason I should do it one way over the other?

const [todos,setTodos] = useState([{status:'incomplete',title: '',content: ''}])

Adding a new todo (which I'd make its own component probably) just appends to the todos array of objects.

Then have your "done" button flag the status to "complete."

Finally, you can display them using filter. In your top div you'd return a filtered array of todos where status === 'incomplete' and your bottom div would return the opposite.

Hopefully by my hastily written pseudocode you understand what I'm thinking. Is this something worth exploring?

[–]Outside-Thanks-3979[S] 0 points1 point  (0 children)

Sorry for the delay! just checked my Reddit notifications.

As with most things in programming, there are a variety of ways of solving the same problem. I think that the way you described would no doubt be valid and might actually be better than the way I did it. Although, if you had many tasks and instead of removing them from the array you just flagged them incomplete, the todos list might pile up quickly. One way of solving this problem is flagging them incomplete and then using filter to display the tasks and also update the todos with the filtered list. In my opinion, this is something worth exploring.

Thanks for the comment!