The conditional rendering React not working. I’m passing as a prop an array Tasks and trying to render the component only if the key of the array is specific, but I’m getting an error – Tasks.forEach is not a function, even though the tasks is an App.js based array. Why is that so ?
https://codesandbox.io/s/test-login-page-tasks-rmfn5j?file=/src/components/Taskslist.js:0-547
// Child component
import React from "react";
import Task from "./Task";
const Taskslist = ({ Tasks }) => {
return (
<div className="wrapper">
<h1>Tasks</h1>
<div className="tasks__wrapper">
<div className="tasks__queued-tasks">
<h2>В очереди</h2>
<div className="tasks__inner-wrapper">
{Tasks.forEach((task) => task.status === 0) && (
<Task Tasks="Tasks" />
)}
</div>
</div>
</div>
<button>Back</button>
</div>
);
};
export default Taskslist;
//App.js
const Tasks = [
{
id: "001",
status: 0,
priority: 2,
title: "Develop website homepage",
description:
"Create a visually appealing and responsive homepage for the website",
schedule: {
creation_time: "2021-07-23T10:00:00"
},
author_name: "John Smith"
},
{
id: "002",
status: 1,
priority: 1,
title: "Implement user authentication",
description: "Add user authentication feature to the website",
schedule: {
creation_time: "2021-07-24T14:30:00"
},
author_name: "Sarah Lee"
}
]
function App() {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" exact={true}>
<Login authors={Authors} />
</Route>
<Route path="/taskslist">
<Taskslist Tasks="Tasks" />
</Route>
<Route path="/errorlogin">
<ErrorLogin />
</Route>
</Switch>
</div>
</BrowserRouter>
);
}