Search filter data in React js using map filter().

 Code is below:

import React, {useState} from 'react'

import MOCKDATA from './../data/MOCK_DATA.json';

function SearchData() {

    const [searchTerm, setSearchTerm] = useState('')

  return (

    <div>

        <h1> SearchData </h1>

        <input placeholder='Search...' type="text" className='searchInput'

        onChange={(e)=>{setSearchTerm(e.target.value)}}

        />

        {MOCKDATA.filter((val) => {

            if(searchTerm == ""){

                return val;

            }else if (val.first_name.toLowerCase().includes(searchTerm.toLowerCase())) {

                return val;

            }

        }).map((val,key) => {

            return <div className='user' key={key}>

                <p>{val.first_name}</p>

            </div>    

        })}

    </div>

  )

}

export default SearchData