Filter

filterEmojis.js

export const filterEmojis = ({ emojisData, searchText = "", maxResult = 20 }) => {

    const filteredEmojis = emojisData.filter(emoji => {

        if(emoji.title.toLowerCase().includes(searchText.toLowerCase())) {
            return true
        }        

        if(emoji.keywords.includes(searchText.toLowerCase())) {
            return true
        }

        return false

    });
    return filteredEmojis.splice(0, maxResult)
}

update file /Emojis/index.jsx

import React, { useState, useEffect } from "react";
import EmojiBox from "../EmojiBox";

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])

    return (
        <div className={styles.emojisGrid}>
            {filteredEmojis.map((data ,index) => (
                <EmojiBox 
                    key={index}
                    title={data.title} 
                    symbol={data.symbol}
                />
            ))}
        </div>
    )
}

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

export default Emojis

Yang akan muncul adalah 20 data