Issue with mapping through the data - React

Question

Do you know why am I not a able to map through the todos? I am following tutorial online and I have it exactly the same as the other guy but It's not mapping through the data. I get the json back and I can see the todos inside of the client-side console.

import React, { Fragment, useEffect, useState } from "react";

const ListTodos = () => {
  const [todos, setTodos] = useState([]);

  const getTodos = async () => {
    try {
      const response = await fetch("http://localhost:5000/todos");
      const jsonData = await response.json();

      setTodos(jsonData);
    } catch (err) {
      console.error(err.message);
    }
  };

  useEffect(() => {
    getTodos();
  }, []);

return (
    <Fragment>
      <table className="table mt-5 text-center">
        <thead>
          <tr>
            <th>Description</th>
            <th>Edit</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
        
          {todos.map((todo) => {
            <tr>
              <td>{todo.description}</td>
              <td>Edit</td>
              <td>Delete</td>
            </tr>;
          })}
        </tbody>
      </table>
    </Fragment>
  );
};

Thanks

timbersaw · Accepted Answer · 2021-02-11 17:50:49Z

4

You should return the JSX if you are using curly braces in function. Like This

{todos.map((todo) => {
       return (<tr>
          <td>{todo.description}</td>
          <td>Edit</td>
          <td>Delete</td>
        </tr>;
      )})}

Else use parentheses to directly return , Like This

{todos.map((todo) => (<tr>
          <td>{todo.description}</td>
          <td>Edit</td>
          <td>Delete</td>
        </tr> 
       ))}

answered Feb 11, 2021 at 17:50

timbersaw

6685 silver badges12 bronze badges

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

Comments

Muhammad Taseen · Accepted Answer · 2021-02-11 17:56:04Z

1

you should use round brackets insted of curly braces in the map function

return (
    <Fragment>
      <table className="table mt-5 text-center">
        <thead>
          <tr>
            <th>Description</th>
            <th>Edit</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {todos.map((todo) => (
            <tr>
              <td>{todo.description}</td>
              <td>Edit</td>
              <td>Delete</td>
            </tr>
          ))}
        </tbody>
      </table>
    </Fragment>
  );

answered Feb 11, 2021 at 17:56

Muhammad Taseen

5791 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

Issue with mapping through the data - React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related