input filter

index.jsx

import React from "react";
import PropTypes from "prop-types"

import styles from './Input.module.css'

const Input = ({ onChange, value }) => {
    return (
        <input
            className={styles.input}
            onChange={onChange}
            placeholder="Search"
            value={value}
        />
    )
}

Input.propTypes = {
    onChange: PropTypes.func,
    value: PropTypes.string
}

export default Input

Input.module.css

.input {
    box-shadow: var(--main-box-shadow);
    border: none;
    border-radius: 6px;
    padding: 10px;

    color: var(--main-font-color);
    font-size: 16px;
    font-weight: 600;
}

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 Input from './Components/Input';
import Empty from './Components/Empty';
import Emojis from './Components/Emojis';

import './App.css';

function App() {
  const [emojisData, setEmojisData] = useState([]);
  const [searchText, setSearchText] = 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()
  }, [])

  const handleSearchEmojis = (e) => {
    setSearchText(e.target.value)
  }

  // console.log(searchText)

  return (
    <>
      <Navbar />
      <Container>
        <Input 
          onChange={handleSearchEmojis}
          value={searchText}
        />

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

export default App;

Ketika kosong akan muncul "data tidak ditemukan"

index.jsx

import React, { useState, useEffect } from "react";
import EmojiBox from "../EmojiBox";
import Empty from "../Empty";
import PropTypes from 'prop-types';
import styles from './Emojis.module.css';

import { filterEmojis } from "../../Utils/filterEmojis";

const Emojis = ({ emojisData, searchText }) => {
    const [filteredEmojis, setFilteredEmojis] = useState([])

    useEffect(() => {
        setFilteredEmojis(filterEmojis({
            emojisData: emojisData,
            searchText: searchText

        }))
    }, [emojisData, searchText])

    if(filteredEmojis.length > 0) {
        return (
        <div className={styles.emojisGrid}>
            {filteredEmojis.map((data ,index) => (
                <EmojiBox 
                    key={index}
                    title={data.title} 
                    symbol={data.symbol}
                />
            ))}
        </div>
        )
    } else {
        return (
            <Empty text="Data tidak ditemukan" />
        )
    }
}

Emojis.propTypes = {
    emojisData: PropTypes.array,
    searchText: PropTypes.string
}

export default Emojis