The code below where I was using an async function was working fine and it would return an array from my Heroku Database.

However, as soon as I tried to map over the array toDos, it would return toDos as undefined and therefore unable to map over the array.

I've tried to look through some previous answers, but they weren't specific to my situation.

Please see below

import "./App.css";
import React, { useState, useEffect } from "react";

import Input from "../Input/Input";
import List from "../List/List";

function App() {
      const [inputValue, setInputValue] = useState("");
      const [toDos, setToDos] = useState([]);

      useEffect(() => {
            async function getToDos() {
                  try {
                        const response = await fetch(
                              "http://localhost:5000/todo"
                        );
                        const data = await response.json();
                        setToDos(data);
                        console.log(data);
                  } catch (error) {
                        console.error(error.message);
                  }
            }
            getToDos();
      }, []);

      console.log(toDos.payload);
      console.log(toDos);
      const arrayToMap = toDos.payload;

      function getValue(text) {
            setInputValue(text);
            console.log(inputValue);
      }

      return (
            <div className="App">
                  <Input getValue={getValue} />
                  <List arrayToMap={arrayToMap} />
            </div>
      );
}

export default App;

Anything I can do to resolve it? Thank you in advance.