How to Build a Simple Search Application in React with API
Source: www.unsplash.com
Introduction
This tutorial demonstrates how to build a simple search application in React with API. Let's imagine we want users to be able to see certain items displayed on the screen based on their search criteria i.e. name. In this tutorial, we’ll make use of a public API for dogs to get the dog data that matches the user search query. As the user enters a search query, the dog(s) that matches the query is returned and displayed, else a Not found message is displayed. Let’s get started. Let’s get started.
Pre-requisite:
- Basic knowledge of Javascript, and React
- Familar with Asynchronous Operations and Promise
- Access to the api-ninjas.com key - <a href="https://api-ninjas.com/api/dogs" target="_blank">API Ninjas</a>. To get the API, register here - <a href="https://api-ninjas.com/register" target="_blank">API Ninjas - Sign up</a> Then go to My Account, and locate the API key
Step #1
-
Scaffold a React application. One quick and easy way to do this is to use the Create React App tool. See Create React App site for details - https://create-react-app.dev/
-
Create a React app project and give it the name - simple-search-app
npx create-react-app simple-search-app
Step #2
- Open the simple-search-app project in any code editor of your choice
- Open the App.js file and delete the content in the return statement.
- Then enter a heading text. Simple Search App
<h2>Simple Search App</h2>
Step #3
Create a method for fetching the dog data from the API above the App component, and give it the name of searchAPI. This could be in the same file or a separate file. For this example place every code in App.js. You need to use asynchronous operation since the data is coming from a remote server/API. To implement the network request to the API, use JavaScript fetch method with Promise. Then, give the method a parameter called name and enter the API url and API key as shown below:
const SearchAPI = (name) =>
fetch(`https://api.api-ninjas.com/v1/dogs?name=${name}`,
{ headers: { 'X-Api-Key': 'xxxxx' } }) // Replace the `xxxxx` with your API key
.then(res => res.json())
.then(data => data)
Step #4
- import
useStatein the first line
import React, { useState } from "react";
- Declare two state properties, and setters using the
useStatehook in App component, then give them default values of empty string’’and empty[]
const [searchQuery, setSearchQuery] = useState(‘’);`
const [searchResult, setSearchResult] = useState([]);`
Step #5
Create an onChange method and give it an argument of event. Then console.log out the value of event.target.value.
const onSearchQueryChange = (event)=>{
console.log(event.target.value)
}
Step #6
Add an HTML input field below the heading text, and set the attributes as shown below.
<input type="search" name="searchQuery" onChange={ onSearchQueryChange} placeholder={search by name} />
Launch the app and open the browser dev tools console tab. Test the app by entering a query text i.e. aaa, then look at the console log for the output for event.target.value. If you get the value entered in the input field as console.log output? Congrats on completing the first milestone in the implementation, the input field is tied to the onSearchQueryChange method correctly. Else repeat steps 3 to 6 again.
Step #7
- Implement the
searchAPImethod created in step 3 to get dogs' data that match a certain search query. We’ll invoke the method and use thethenmethod to resolve the Promise when the data is available since it’s an asynchronous operation. Then use the setter -setSearchResultto set the returned data to state property -searchResult
const onSearchQueryChange = (event) => {
e.preventDefault();
setSearchQuery(e.target.value);
// Fetch search data based on query`
SearchAPI(searchQuery)
.then((data) => {
// Set data to result`
setSearchResult(data);
console.log(data, searchResult)
})
.catch((e) => { console.log("error:", e) });
};
- Remove the previous console.log in 6 and place it inside the
thencallback, and change the log argument todataandsearchResult.
Again, test the app by entering a query text i.e. Bohemian Shepherd
, then look at the console log for the output for data. You should get the dog data returned from the API.
Step #8
Display the value of searchResult below the input field. To do this, use map method to loop over the searchResult result, then access the name and image_link to display the dog name and image.
{ searchResult.map(dog =>(
<div>
<img src={image} alt=""/>
<h5 >{name} </h5>
</div>
)
)}
Again, test the app by entering a query text i.e. Bohemian Shepherd. You should see the dog data returned from the API displayed on the screen.
Step #9
Add conditions to handle invalid search query, and clear search screen if the searchQuery or searchResult is empty. See the changes as shown below.
// Perform two checks here
// 1- Clear search input field if the query is empty
// 2- Hnadle non match search query i.e. "123"`. So check if the result array - 'data` of length `0`
// Note: The API would returns empty result array-`[]` for non match query
// If one of them is true, set empty array `[]` to search result property
if (event.target.value === "" || data?.length === 0) {
return setSearchResult([]);
}
Again, test the app by entering an invalid query text i.e. 123. No dog data is returned and the screen is empty. Also, you can enter a valid search query i.e. aaa get dog data displayed, then delete all the letters. The screen should be empty again
Step #10
Add a ternary condition to display dog data if available else show Not found message.
{searchResult.length > 0 ?(
searchResult.map(dog =>(
<div>
<img src={image} alt=""/>
<h5 >{name} </h5>
</div> )
)):
( <h3> No found </h3>)
}
Lastly, again test the app by entering an non match query text i.e. 123. No dog data is returned and the Not found message is display. Also, you can enter a valid search query i.e. aaa, the dog data are displayed, then delete all the letters. The Not found message is display again
Complete code for the simple search application implementation
import React, { useState } from "react";
// Some valid search query- 'Bohemian Shepherd'
// Replace the `xxxxx` with your API key
const SearchAPI = (name) =>
fetch(`https://api.api-ninjas.com/v1/dogs?name=${name}`, { headers: { 'X-Api-Key': 'xxxxx' } })
.then(res => res.json())
.then(data => data)
export default function App() {
const [searchQuery, setSearchQuery] = useState('')
const [searchResult, setSearchResult] = useState([])
const onSearchQueryChange = (event) => {
event.preventDefault();
setSearchQuery(event.target.value);
// Fetch search data based on query`
SearchAPI(searchQuery)
.then((data) => {
// Perform two check here
// 1- Clear search input field if the query is empty
// 2- Hnadle non match search query i.e. "123"`. So check if the result array- 'data` of length `0`
// Note: The API would returns empty result array-`[]` for non match query
// If one of them is true, set empty array `[]` to result property
if (event.target.value === "" || data?.length === 0) {
return setSearchResult([]);
}
// Else both conditions are false, set data to result propery`
setSearchResult(data);
})
.catch((err) => {
console.log("error:", err)
});
};
return (
<div>
<h2 >Simple Search App</h2>
<div>
<div >
<div>
<input type="search" name="searchQuery" onChange={onSearchQueryChange}
placeholder="Search by name" aria-label="Search" />
</div>
</div>
</div>
{searchResult.length > 0 ? (
searchResult.map(dog => (
<div>
<img src={dog.image_link} alt="dog" />
<div>
<h5>{dog.name} </h5>
</div>
</div>
)
)
) : (
<h2> No found </h2>
)
}
</div>
);
}
That's it. Happy coding!