Just started leaning Reac. Trying to build a simple App, which shows the list of Tasks. However when I run the App, it does not show anyout in the browser. There is no error in the console or anything. Not sure what is missing here.
Here is the code:
import React from 'react';
import TaskList from './TaskList';
function App() {
const tasks = [
{id:0,description:"1st Task",isDone:false},
{id:1,description:"2st Task",isDone:false}
]
return (
<div>
<TaskList tasks={tasks} />
</div>
);
}
export default App;
import React from "react";
import Task from "./Task";
export default({ tasks }) => {
return (
<ul className="list-group">
{
tasks.map(task => {
<li key={task.id} className="List-group-item">
<Task task={task} />
</li>
})}
</ul>
)
}
import React from "react";
export default ({task}) => {
return(
<p>
{task.description}
</p>
)
}
The list of tasks are not shown in the screen, neither there is any error in console.
Here is where you are doing wrong, in your map function in TaskList.js you are not returning anything. Try with this :
import React from "react";
import Task from "./Task";
export default({ tasks }) => {
return (
<ul className="list-group">
{
tasks.map(task => {
return (<li key={task.id} className="List-group-item">
<Task task={task} />
</li>)
})}
</ul>
)
}
In your TaskList component you didn't return anything you need to replace { by (
import React from "react";
import Task from "./Task";
export default ({ tasks }) => {
return (
<ul className="list-group">
{tasks.map((task) => (
<li key={task.id} className="List-group-item">
<Task task={task} />
</li>
))}
</ul>
);
};You are not returning anything in your .map() loop. It Should be
tasks.map(task => {
return <li key={task.id} className="List-group-item">
<Task task={task} />
</li>
})}
Or since you don't have any other logic inside your callback function you can just remove the brackets and the arrow function will return the single jsx statement by default.
{tasks.map((task) =>
<li key={task.id} className="List-group-item">
<Task task={task} />
</li>
)}