React: I can't print the data fetched

As I wrote above, I can't print the data recovered from the fetch, I've been on this for some time without any results.

I'm new to React and learning how to use hooks.

The error I'm getting is:
Cannot read properties of undefined (reading 'map')

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

export default function App() {
  const [users, setUsers] = useState();
  useEffect(async () => {
    await fetch('https://jsonplaceholder.typicode.com/users/').then(response => response.json()).then(data => setUsers(data))
  }, []);

  return (
    <div>
      {
        users.map((user) => {
          <div>{user.name}</div>
        })
      }
    </div>
  )
}

Can you kindly help me?

1. Add a default value as empty array to useState to make sure that map() always exist. (The first render will map on an empty array, which is fine since there is not data yet)

   const [users, setUsers] = useState([]);
   

2. useEffect callback should not be await/async, removed that
3. You didn't return anything from your map(), I've changed it to:

   {
     users.map((user) => {
       return <div>{user.name}</div>
     })
   }
   

   Or as the short-hand return style:

   {
     users.map(user => <div>{user.name}</div>)
   }
   

   • <https://stackoverflow.com/questions/39999671/map-function-not-working-in-react>
   • <https://stackoverflow.com/questions/70361452/react-js-map-is-not-rendering-components>

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

const { useState, useEffect } = React;

const App = () => {
  const [users, setUsers] = useState([]);
  useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/users/')
          .then(response => response.json())
          .then(data => setUsers(data))
  }, []);
  
  return (
    <div>
      {
        users.map((user) => {
          return <div>{user.name}</div>
        })
      }
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("react"));

<!-- language: lang-css -->

html, body { height: 100vh; }

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

<!-- end snippet -->

The issue is that users is undefined at the start, you have 2 ways to solve this:

1. set an empty array as default for users: useState([])

const [users, setUsers] = useState([]);

2. show something else like a loading text when users is undefined

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

export default function App() {
  const [users, setUsers] = useState();
  useEffect(async () => {
    await fetch('https://jsonplaceholder.typicode.com/users/').then(response => response.json()).then(data => setUsers(data))
  }, []);

  return (
    <div>
      {!users && "loading users..."}
      {
        users && users.map((user) => {
          <div>{user.name}</div>
        })
      }
    </div>
  )
}