I created MyForm component, I am using state to track formData, another state for tasks submitted, and another task for isSubmitted which I don't think I no longer need. MyForm seems to be working fine, when I call the Task component is where I believe the issue is. In Task component I am trying to return a task in card form, that displays the task. I haven't worked on my css as I am trying to get the logic down first making sure it all works.
I tried a couple of things, first I thought it might have to be the way I was calling the component and passing the props in MyForm, but I searched google and I truly believe it is correct . I tried mapping through it first:{tasks.map((task)=>{})}
I had issues with "undefined object", so then I just called it regularly . Instead I returned and mapped through tasks in Task.jsx. I'm sure I'm doing something wrong, but dev tools doesn't return any errors, and I don't see any myself. Still learning React so I'm sure it's something dumb. Been looking for hours now but can't seem to find it. I see other forms that I could copy, but I am trying to learn, and hopefully see what I'm doing wrong instead. Task MyForm
Here is my GitHubas well, incase you needed the full code.
The map function of your Task component doesn't return anything. You need to return the JSX you're generating. You should also have a return null outside your if statement.
{tasks.map((t, index) => {
if (t) {
// wrap in return
return (
<div className="taskWrapper" key={index}>
<div className="front">
<h1>Title: {t.title}</h1>
</div>
<div className="back">
<h2>Due Date: {t.dueDate}</h2>
<h2>Priority: {t.priority}</h2>
<h2>Status: {t.status}</h2>
<h2>Description: {t.description}</h2>
</div>
</div>
);
}
return null; // return null when if case fails
})}