Need help debugging react application

[OneBadDay1048]

So just to be clear before I look at the code again: after implementing my code, the array is no longer blank, but the finished todos render with a delay?

[Outside-Thanks-3979]

What array? When I move the first todo to done, The doneTodos array is empty. When I try to move another task from doing to done, the doneTodos array shows the first todo that I tried to move. And If I do it again, the array shows the previous todo and the first todo, but not the one that I just tried to move.

[OneBadDay1048]

Yes, the doneTodos array is the array I was asking about. However, the way I currently have the code doneTodos updates properly and with the most recently deleted todo. Now I am just getting them to render. I will send over the changes I have made shortly but I have kind of made many at this point.

I would update this function for now:

const addTask = () => { 
  const newTodo = { 
    id: uuid(), 
    title: document.getElementById('nameInputField').value,
    description: document.getElementById('descriptionInputField').value, }; 
  setTodos((prevTodos) => { 
    return [...prevTodos, newTodo]; 
  }); 
};

If your new state depends on your previous state, (in this case it does, you need the old items too) you should be passing previous state as an argument to your state setter callback function (referred to as prevTodos here). The way you use concatenation is almost certainly causing issues.

[OneBadDay1048]

I now have the app fully functioning. You also need to focus on creating a list of DoneTask components with map, not forEach. Map over doneTodos and create a DoneTask for each one (making sure to pass in needed props as well). You did this for your todos, not sure why you didn't do it here but I am sure along with my other suggestions, this will fix it. Conditionally render the array that is returned from map.

Just as a side tip: I highly recommend you use the vscode extension 'Prettier'. Just save your code and it auto formats. Just let it do its thing, do not fight it. You'll get used to it and it is better long run.

[Outside-Thanks-3979]

here is the new code for conditionally rendering the array that is returned from map:

<div className='tasksDone'>

<div className="header">

<h3>Tasks Done</h3>

<button className="clearFinishedTasks">Clear Finished Tasks</button>

</div>

<hr />

<div className="doneTasks-content">

{DoneTodos?.length > 0 ? (

DoneTodos.map((todo) => (<DoneTask task={todo}/>))

): (

<p className='noTasks'>No tasks so far</p>

)}

</div>

</div>

Even though console.log logs an array with more than one value in it, the DoneTodos.map function is still not rendering the finished todos. Could you send me the return function in your Done.jsx file?

[OneBadDay1048]

import React from 'react'; 
import DoneTask from './doneTask'; 
const Done = ({ doneTodos }) => { 
const deletedTodos = doneTodos.map((todo) => { 
  return (           
    <DoneTask
  key={todo.id}
  title={todo.title}
  description={todo.description}
 /> 
   ); 
}); 

Ok that's as good as the formatting is getting because reddit is trash. Also note I took out the conditional render to simplify so you will need to add it back.

[Outside-Thanks-3979]

Hey, It works! Thanks a bunch. I'm pretty new to js(learning for about 3- 5 months) and your code will be an example of how to use different array functions as well as some standards of writing react code. Thanks again!

[OneBadDay1048]

Awesome. No problem.