Dynamic Rendering Based on Fetching

app.js

`
import { useState, useEffect } from 'react';
import axios from 'axios';

import './App.css';

function App() {
  const [emojisData, setEmojisData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false)


  useEffect(() => {
    async function fetchEmojis() {
      setLoading(true)

      try {
        const res = await axios.get('https://run.mocky.io/v3/fe964130-70d0-430f-b839-e55081423c28')
        setEmojisData(res.data)
        setLoading(false) 

      } catch (error) {
        console.error(error)

        setError(true)
        setLoading(false) 
      }

    }

    fetchEmojis()
  }, [])

  return (
    <div className="App">
      <h1>Hello</h1>

      {loading && <p>Loading..</p>}
      {error && <p>Opsss Error....</p>}
      {emojisData.length > 0 && <p>Data sukses di ambil</p>}
    </div>
  );
}

export default App;

Jika berhasil maka akan muncul seperti ini, ketika get data nya akan ada loading sebentar.

jika gagal data akan muncul data error