CODEWITHSUNDEEP
javascriptreactjs
BlockChain Learner
BlockChain Learner

Reputation: 133

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

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:

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

Upvotes: 1

Views: 134

Answers (4)

brk
brk

Reputation: 50346

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;

Upvotes: 1

SakisTsalk
SakisTsalk

Reputation: 875

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

Upvotes: 1

Borni.Mr
Borni.Mr

Reputation: 679

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

Upvotes: 1

Youssouf Oumar
Youssouf Oumar

Reputation: 46261

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

Upvotes: 1

Related Questions