How to display a loading message in React using Hooks

Need to show a loading message while waiting for stuff to happen? Here's a quick tip to show a loading message in React.

First, store whether "loading" is happening or not. We'll initially set is as false:

const [isLoading, setIsLoading] = useState(false);

Next, we'll use use a **ternary operator **(a short hand if statement) to display a message if the app is "loading", or display a "done" message:

return (
  <div className="App">
    {isLoading ? <div>Loading...</div> : <div>Done!</div>}
  </div>
);

Now, we simply change the isLoading variable whenever "loading" happens - e.g, during API calls.

Check out this code sandbox:

This is part of the React bite-size series of posts. Check out the rest here!