React mapping fetched data

Question

I'm trying to fetch some data from my database with some simple to-dos. However I cant seem to map them out into a list on my site.

I keep getting errors like: todoFromServer.map is not a function or that todoFromServer is not an array etc.

My current code looks like this:

import apiFacade from "../api/apiFacade";
import React, { useState, useEffect } from "react";
import {Form, FormGroup, Label, Input, Button} from "reactstrap"

export default function SecurePage() {

  const [todoFromServer, setTodoFromServer] = useState("Waiting...");

  useEffect(() => {
    apiFacade.getTodo().then((data) => setTodoFromServer(data));
  }, []);

  return (
    <div className="container-fluid padding">
      <div className="row">
        <div className="col-3"></div>
        <div className="col-6 text-center">
          <Form>
            <FormGroup>
              <h3 className="mt-5">Todos</h3>
              <Input type="text" placeholder="Enter Todo"></Input>
            </FormGroup>
            <Button type="submit">Add</Button>
          </Form>
          <div>
            {todoFromServer.map(() => (
              <div>{todoFromServer.todoText}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

The data I trying to fetch should come out as json looking like this:

I'm kind of lost.. Hope someone can help me out to be clear - I want the data mapped out on a list with a delete button next to it...

Answer 1

  const [todoFromServer, setTodoFromServer] = useState([]); // <=== initialize this as an empty array.

  useEffect(() => {
    apiFacade.getTodo().then((data) => setTodoFromServer(data)); // Make sure data returned from Promise resolve is indeed an array
  }, []);

You want to read todoText of each todo's inside your array item so you would do something like this.

{todoFromServer.length ? todoFromServer.map((todo) => (
    <div>{todo.todoText}</div>
)) : "Waiting..."}

For additional reference, take a look at Array.map usage here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map