No data is shown while running the react app

Just started leaning React JS. 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

1. App.js

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;

2. TaskList.js

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>
    )
}

3. Task.js

import React from "react";
export default ({task}) => {
    return(  
        <p>
         {task.description}
        </p>     
    )
}

The list of tasks are not shown in the screen, netiher there is any error in console.

Any help here !

Thanks

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>
      )}

You are missing return from TaskList.js. Here in this line

tasks.map(task => {            
            <li key={task.id} className="List-group-item">
                <Task task={task} />
            </li>
        }

when using {} with arrow function you need to explicitly return.

import React from 'react';
import Task from './Task';

export default function TaskList({ tasks }) {
  console.log(tasks);
  return (
    <ul className="list-group">
      {tasks.map((task) => ( // changed here. Note the braces
        <li key={task.id} className="List-group-item">
          <Task task={task} />
        </li>
      ))}
    </ul>
  );
}



import React from 'react';
export default function Task({ task }) {
  return <p>{task.description}</p>;
}




import React from "react";
import "./style.css";
import TaskList from "./TaskList"

export default 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;