TypeError: .map is not a function - React application

Question

I created this React application to practice the fetch API. However, while writing the code to display the data on the browser via the map method, I got the error message "TypeError: profile.map is not a function". Below is the code:

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

function App() {
  // https://reqres.in/api/users
  const [profile, setProfile] = useState([]);
  const [loading, setLoading] = useState(false);

  const getProfile = async () => {
    setLoading(true);
    const response = await fetch("https://reqres.in/api/users");
    const data = await response.json();
    setProfile(data);
    setLoading(false);
  };

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

  return (
    <Fragment>
      <h1>React fetch</h1>
      <div className="main">
        <section className="section">
          <h2>Get database</h2>
          <div>
            {loading ? (
              <Fragment>loading..</Fragment>
            ) : (
              profile.map(i => {
                <Fragment>
                  <ul>
                    <li>{i.id}</li>
                    <li>{i.email}</li>
                    <li>{i.first_name}</li>
                    <li>{i.last_name}</li>
                    <li>
                      <image src={i.avatar} />
                    </li>
                  </ul>
                </Fragment>;
              })
            )}
          </div>
        </section>
        <form className="section">
          <h2>Post data</h2>
          <input type="text" placeholder="enter detail" />
          <button type="submit">Post</button>
        </form>
        <form className="section">
          <h2>Update data</h2>
          <select>
            <option>Choose data</option>
          </select>
          <input type="text" placeholder="enter detail" />
          <button type="submit">Update</button>
        </form>
      </div>
    </Fragment>
  );
}

export default App;

Why isn't map being recognized?

Answer 1

I believe it's because .map is a method for Array prototypes, not for Objects (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

You can return the array from the object by using data.data instead of just data:

...
  const getProfile = async () => {
    setLoading(true);
    const response = await fetch("https://reqres.in/api/users");
    const data = await response.json();
    setProfile(data.data); // probably a safer way to do this, but if you console.log(data) you'll see an object is being returned, not an array. 
    setLoading(false);
  };
...