Search Function in React JS to display List with filtered items

To add a search function for a list in a React Component, we can follow these steps:
1. Create a new state variable to hold the search query.

2. Update the map function that renders the table rows to filter the array based on the search query.

3. Add an input field where users can enter their search query and update the state with the user’s input.


Here we have an array, adminProducts which needs to be filtered and displayed based on the query given for search function.

const [searchQuery, setSearchQuery] = useState(‘””);

A set variable “searchQuery” is used here to store the search query given by the user for search function.


name = ‘search’

placeholder = ‘Search’

InputProps = {{

endAdorment : (


<SearchIcon />


value = {searchQuery}

onChange ={ (e) => setSearchQuery(}


Another array is declared to store the filtered items obtained by filtering from the list.

const filteredAdminProducts = adminProducts.filter((contact) =>{

return (

searchQuery.trim() ===  ‘ ‘ ||    // if the search query is empty, show all items

Object.values(contact).some((value) = >





Finally use the filtered array to display the list:


{, index) => (

<TableRow key ={}>

{/* code to display the list */}




Leave a Reply