How to generate rows in a table using map in react js?

Question

my code is below:

const [todos, setTodos] = useState('');

I am using a fake server.

function getTodos () {
  axios.get('http://localhost:4000/todos')
  .then(function (response) {
    setTodos(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
  });
}

<tbody id="tableBody">
        {
          todos.map((item) => (
            <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.task}</td>
                <td>{item.desc}</td>
                <td>{item.due}</td>
                <td>{item.status}</td>
            </tr>
          ))
        }
        </tbody>

But I am getting this error: TypeError: todos.map is not a function

You're most likely getting this error because thanks to const [todos, setTodos] = useState(''); when the component renders first, todos is a string. Use const [todos, setTodos] = useState([]); instead. — user5734311
– user5734311, Commented Jun 16, 2021 at 10:13

undefined · Accepted Answer · 2021-06-16 10:15:14Z

1

First, you should use empty array default value for your todos

const [todos, setTodos] = useState([]);

Than check what you setting in todos setTodos(response.data);

Probably error is because of default value of todos

answered Jun 16, 2021 at 10:15

undefined

984 bronze badges

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

Comments

Harish Kotla · Accepted Answer · 2021-06-16 11:27:11Z

0

As your todos is an array [todos, setTodos] = useState('') is wrong and you need to set it to an empty array const [todos, setTodos] = useState([]); And also whenever you get simillar error keep in mind that there is some problem with todos array it isnt an array or you are handling it in a wrong way

answered Jun 16, 2021 at 11:27

Harish Kotla

1

Collectives™ on Stack Overflow

How to generate rows in a table using map in react js?

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