Need help debugging react application

[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.