List with Simulated Fetch

datamedium

20:00starts when you type

Guide

Challenge mode

# Requirements status

not runrequests /api/users and shows Loading while waiting
not runshows the users when they arrive
not runshows an error if the request fails

# Edge cases

They are shown when you run the tests. Until then they appear as a hidden requirement.

hiddenHidden requirement
hiddenHidden requirement
hiddenHidden requirement

# Statement

Goal

Build a list of users that is requested from the server and handles the loading and error states. You practice useEffect with requests and asynchronous state.

What you already have

The interface for the four states: loading, error, empty list and list with data.
Your job is the logic: make the request, store its result and decide which state is shown.
Keep the texts Loading..., Could not load the users and No users, and the roles: the tests use them.

Requirements

When mounted, the component requests /api/users with fetch.
While it waits, Loading... is shown in an element with role="status".
When the data arrives (an array of { id, name } objects), each name is shown in an li.
If the request fails, Could not load the users is shown in an element with role="alert".

Example

You open the challenge → you see Loading... while the request is in progress.
The request returns Ada Lovelace and Alan Turing → you see those two names.
The request fails → you see Could not load the users.

Hints

Hint 1

Request the data inside a useEffect with an empty dependency array.

Hint 2

A single piece of state with the kind of situation and the data avoids impossible combinations.

Hint 3

In the preview, /api/users answers after half a second. To see the error state, request /api/users?status=500 for a moment, and put the URL back before running the tests.

Concepts

useEffect for side effects.
fetch, promises and error handling.
Loading, error and data state.

App.jsx

Preview

The console is empty

Run your code with Ctrl+S

This console starts empty every time the preview loads. The browser's DevTools console keeps the messages with Preserve log.