Building a web app(whinst) part 25: Adding search functionality

Applications that have a lot of records usually have a search feature in them that allows users to search for a particular record instead of scrolling through many of them. In this article, I’ll walk you through how I setup search functionality in the Whinst web app.

Search functionality🔎

To implement search functionality I first created a separate search component which is imported into the main component. The search component takes as a property the list of data the will be searched through. Using the built in input onChange property, when a user types in what they want to search for it is stored in state. This value stored in state is then checked to see if it is included in the list of data that is passed into the search component. If it is included it will return all value matching the input until a single value is reached. If the user did not input any text it returns nothing. The code below shows how this is implemented

export default function Search(props){
   const [input,setInput] = useState("")
return(
<>
 <input
    type="text"
    placeholder="Search..."
    
    onChange={(e)=>{
        setInput(e.target.value);
    }}
    />
     {
        props.filter((value)=>{
            if(input == ""){
                return value
            }else if(value.name.toLowerCase().includes(input.toLowerCase())){
                return value
            }
        }).map((value:any,key:any)=>{
            return (
                 <>
             <p>{value.name}</p>
                 </>
            )
        })
    } 
</>
)
}

With this crucial functionality now implemented I’m now a couple weeks away from the launch of Whinst. Thanks for reading🙏.