React, nothing is shown after looping through an array of data with map method

Question

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:

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;

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

Task.js

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.

Youssouf Oumar · Accepted Answer · 2022-01-14 13:35:43Z

1

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

answered Jan 14, 2022 at 13:35

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Borni.Mr · Accepted Answer · 2022-01-14 13:36:02Z

1

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

answered Jan 14, 2022 at 13:36

Borni.Mr

6793 silver badges7 bronze badges

Comments

SakisTsalk · Accepted Answer · 2022-01-14 13:37:36Z

1

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

answered Jan 14, 2022 at 13:37

SakisTsalk

8751 gold badge11 silver badges23 bronze badges

4 Comments

BlockChain Learner Over a year ago

thank you...It worked...but still not clear why the curly braces did not work. what is the difference?

BlockChain Learner Over a year ago

as far I know, arrow functions need to have a curly braces

Borni.Mr Over a year ago

@user3161840 after arrow function is your return : if you have a logic you make a curly braces and when returning html you need to add return (your html here) // if your arrow function desn't have any logic you can directly make your html after the =>

SakisTsalk Over a year ago

@user3161840 you can find some concrete examples here

brk · Accepted Answer · 2022-01-14 13:51:33Z

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;

Collectives™ on Stack Overflow

React, nothing is shown after looping through an array of data with map method

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related