Get initial api emoji

Create Folder emoji

index.jsx

import React from "react";

import PropTypes from 'prop-types';
import styles from './Emojis.module.css';

const Emojis = ({ emojisData }) => {
    return (
        <div className={styles.emojisGrid}>
            {emojisData.map((data ,index) => (
                <div>
                    {/* menghandle sebuah string menjadi HTML */}
                    <p 
                        dangerouslySetInnerHTML={{
                        // symbol ada sebuah emoji, codePoint(0 menjadi) menjadi hexcode
                        __html: `&#${data.symbol.codePointAt(0)}`
                    }} />
                </div>
            ))}
        </div>
    )
}

Emojis.propTypes = {
    emojisData: PropTypes.array
}

export default Emojis

Emoji.module.css

.emojisGrid{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;

    margin-top: 32px;
}

app.js

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

import Navbar from './Components/Navbar'
import Container from './Components/Container';
import Empty from './Components/Empty';
import Emojis from './Components/Emojis';

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 (
    <>
      <Navbar />
      <Container>
        <h1>Hello</h1>

        {loading && <Empty text="Loading..." />}
        {error && <Empty text="Error..." />}
        {emojisData.length > 0 && <Emojis emojisData={emojisData} />}
      </Container>
      
    </>
  );
}

export default App;