DEV Community

Simple search form in REACT using hooks 🔎.

Asim Dahal on September 14, 2019

Searching is one of the most important components of your web application. Let's take an example of an E-commerce platform where there are thousand...

Read full post

Alex K. • Sep 14 '19

Nice tutorial :) One comment - you don't really need to set the filtered results on the state in this case. I'd just filter the people according to the search term during render:

function App() {
  const [searchTerm, setSearchTerm] = React.useState("");
  const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  const results = !searchTerm
    ? people
    : people.filter(person =>
        person.toLowerCase().includes(searchTerm.toLocaleLowerCase())
      );

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      <ul>
        {results.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Here's a sandbox.

Ahmed Aziz • Oct 29 '19

Thank you, that was really helpful! One quastion: do you know how to make the search accept two seach parameters? like i want to search base on the name and also the address?

This what i tried, and failed :(

function App() {
  const [searchTerm, setSearchTerm] = React.useState("");
  const [searchTerm2, setSearchTerm2] = React.useState("");

  const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  const handleChange2 = event => {
    setSearchTerm2(event.target.value);
  };

  const results = !searchTerm || !searchTerm2
    ? people
    : people.filter(person =>
        person.name.toLowerCase().includes(searchTerm.toLocaleLowerCase())
    ||  person.address.toLowerCase().includes(searchTerm2.toLocaleLowerCase())
      );

  return (
    <div className="App">
      <input
        type="text"
        placeholder="Search name"
        value={searchTerm}
        onChange={handleChange}
      />
      <input
        type="text"
        placeholder="Search address"
        value={searchTerm2}
        onChange={handleChange2}
      />
      <ul>
        {results.map(item => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Alex K. • Oct 29 '19 • Edited

I think it'd be const results = !searchTerm && !searchTerm2 instead of || otherwise the filtering will be applied only of both search terms are present.

Ahmed Aziz • Oct 30 '19

  const results =
    searchTerm || searchTerm2
      ? !searchTerm2
        ? people.filter(person =>
            person.name.toLowerCase().includes(searchTerm.toLocaleLowerCase())
          )
        : people.filter(
            person =>
              person.address.toLowerCase() ===
              searchTerm2.toLocaleLowerCase()
          )
      : people;

i came up with this solution and it works now but only if one of the conditions is true. I want to make the method filter the two conditions in the same time. So like i want to know all the people that their name is Alex and lives in New york

Alex K. • Oct 30 '19

For your specific case you can do like this:

const results = searchTerm && searchTerm2 ?
  people.filter(person =>
    person.name.toLowerCase().includes(searchTerm.toLocaleLowerCase()) &&
    person.address.toLowerCase().includes(searchTerm2.toLocaleLowerCase())
  ) : people

However, note that the filter won't be applied unless both search terms are present.

Ahmed Aziz • Oct 31 '19

Yah but that is exactly what i don't want. I want that the user can choose one of the filters or both of them in the sametime

Abdullah Abu Rtima • Jan 19 '20 • Edited

call data from api and filter ....

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

export default function Search() {
    const [data ,setData] = useState([]);
    const [filtered ,setFilterd] = useState([]);
    const [result , setResult] = useState("");

    useEffect(()=>{
            const fetchData = async ()=> {
                    try{
                        const res = await axios.get('https://jsonplaceholder.typicode.com/users');
                        setData(res.data);
                        setFilterd(res.data);
                    }catch(err){
                        throw new Error(err);
                    }
                     };
                  fetchData(); 
        },[]);

        useEffect(()=> {
            const results = filtered.filter(res=> res.name.toLowerCase().includes(result)

            ); 
            setData(results)
        } ,[result])
        //console.log(data)

      const onChange =(e)=> {
            setResult(e.target.value);
        }

    return (
        <div>
        <input 
            type="text"
            placeholder="serch here .."
            value={result}
            onChange={onChange}
        />
        {data.map((r,i)=> (   
                <ul key={i}>
                <li>{r.name}</li>
                </ul>)
            )
        }
    </div>
    )  
}

amit-dotcode • Sep 14 '20

codesandbox.io/s/unruffled-bose-tk...

Please Help Me .. See my Code
The problem is when I search in the search field to my note app its work but when I remove search field text my old add data not show only search data show see my code you better understand that what I m trying to say

moniqueboea • Mar 5 '20

Thanks. I tried you exact code and get this warning:

29:6 warning React Hook useEffect has a missing dependency: 'filtered'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Any suggestions?

My search isn't working

moniqueboea • Mar 5 '20

Actually, the search is working. I didn't realize that I had to type lower case. Can that be removed? Most people will start typing names in upper case (at least the first letter).

Rhadimer Antigua Sánchez • Apr 8 '21

Excellent!

Riad • Oct 18 '21

thanks a lot !! you made my day..

Prateek Thapa • Sep 14 '19

Great.
One nitpick here: Make sure you trim your string for searching. Trim removes all the spaces at the start and end of the string.

people.filter(person => person.toLowerCase().includes(searchTerm.trim()));

Gerald Ryan • Apr 30 '20

This is great for simple arrays, but what about arrays of objects and you want the search to be broader in scope. For instance if you want to search a fitness class (which is an object) by name, or by duration, or by intensity or any other property

Adam Crockett 🌀 • Sep 14 '19

The cover photo looks like the macbook has tin worm 🐛

Asim Dahal • Sep 14 '19

🤣🤣 Actually i got the picture from unsplash

Adam Crockett 🌀 • Sep 14 '19

Okay well whoever took it, they must have been worried about yin worm 😁

Bishwo Shrestha • Sep 15 '19

Great post

Ihor Stavratii • Dec 21 '19

It was realy helpful, thanks!
Maybe somebody know how to implement a feature which would highlight the searched results in the list?

komal3912 • Jan 28 '20

Such a detailed post! helped a lot to understand hooks. Much appreciated.

Belnako • Mar 5 '20

How do I change the code if I want people to display as a list by default, without typing something in the searchbox?

moniqueboea • Mar 12 '20

Has anyone built a search app that has a form that the user submits and then display the results?

fatemehqasemkhani • May 21 '20

helpful, thanks.

Butonix • Jun 4 '20

Search only starts with a small letter. It doesn't work with the big one

Ronny Ewanek • Jun 27 '20

Thanks for this!

Braxton Hawkins • Jul 31 '20

Hi, thank you for this post, it was very helpful. I was wondering, is there a way to make the list hidden, and only show when the user is actually searching?

amit-dotcode • Sep 4 '20 • Edited

when i try to use this code to filter i m facing this kind of error again and again please help

TypeError: oldData.toLowerCase is not a function

KareemMarwan • Oct 24 '20

Thx bro

Paz Muñoz • Apr 2 '21

Hi!
What If I have in a separated component the Search Bar from the list of results? I want to know how can I send the results to a parent component :)

mohammadhani110 • Jul 1 '21

Love it ! Simple and easy to follow. Thanks alot

Aytaç Ünal • Mar 7 '21

thanks bro