How to map prop passed to client component in NEXT 13?

I'm new to the next 13 APP directory and it works when I map in the server component like this:

const Tasks = async () => {
const { tasks } = await getAllTasks()
return (
<section>
<ul className="flex flex-col mx-3">
{tasks?.map(({_id, title, body}: TaskProps) => (
<Task key={_id} id={_id} title={title} body={body} />
))}
</ul>
</section>
)
}
export default Tasks

Though when I try to extract this code into a client component (so that I can useEffect), I'm unable to map the passed 'tasks' prop

 "use client"
//my imports here
export default function TaskList (tasks) {
return (
<ul>
{tasks.map((task) => (
<Task key={_id} id={_id} title={title} body={body} />
))}
</ul>
)
}

Task.tsx:

  export default function Task({ id, title, body }: TaskProps) {
async function deleteTask() {
await removeTask(title);
}
return (
<li key={id}>
<div className="flex justify-between" >
<h1 className='font-bold'>{title}</h1>
<span 
className="material-icons hover:cursor-pointer text-skin-dark" 
onClick={deleteTask}
>delete</span>
</div>
<a className="mr-12" >{body}</a>
</li>
);
}

I've tried a conditional return for the tasks prop 'tasks && ( JSX )'
Also tried putting the list item tags around Task, inside Tasks

Appreciate any assistance

How are you passing tasks into your client component from your server component? It also looks like you might have forgotten to destructure your client component's props. You wrote

"use client";
//my imports here

export default function TaskList(tasks) {
  return (
    <ul>
      {tasks.map((task) => (
        <Task key={_id} id={_id} title={title} body={body} />
      ))}
    </ul>
  );
}

but tasks should be a property on an object, like this:

"use client";
//my imports here

export default function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map((task) => (
        <Task key={_id} id={_id} title={title} body={body} />
      ))}
    </ul>
  );
}