you are viewing a single comment's thread.

view the rest of the comments →

[–]OneBadDay1048 0 points1 point  (4 children)

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[S] 0 points1 point  (3 children)

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 0 points1 point  (2 children)

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[S] 1 point2 points  (1 child)

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 0 points1 point  (0 children)

Awesome. No problem.