6. Populate the Data Stores With Filtering
The idea of filtering is quite simple. We have our store state, and it always keeps the original data without changing. Then, by using the filter function on this state, we only get the matching elements and then assign them to the users state.
const filteredData = store.filter((item) => (
item.name.toLowerCase().includes(event.target.value.toLowerCase()))
The filter method requires a function as an argument, a function to be run for each element in the array. Here we refer each element inside the array as item. Then we take the name key of each item and convert it to lower case in order to make our filtering functionality case insensitive.
After we have the name key for the item, we check if this one includes the search string we typed in. includes is another built-in JavaScript method. We pass the search string typed in the input field as an argument to includes, and it returns if this string is included in the variable it was called on. Again, we convert the input string to lower case so that it does not matter whether you type upper or lower case inputs.
In the end, the filter method returns the matching elements. So we simply take these elements and store them in the setUsers state.
Update the App component with the final version of the function we created.
const filterNames = (event) => {
const filteredData = store.filter((item) =>
item.name.toLowerCase().includes(event.target.value.toLowerCase())
);
setUsers(filteredData);
};
7. Creating the Components
Although for this small example we could put everything inside the App component, let’s take advantage of React and make some small functional components.
Let’s add a couple components to the app. First we import the components from separate JavaScript files (we’ll define the files shortly):
import Lists from "./components/Lists"; import SearchBar from "./components/SearchBar";
Next we update our App component’s return statement to make use of these components:
return (
<div className="Card">
<div className="header">NAME LIST</div>
<SearchBar searchFunction={filterNames} />
<Lists usernames={users} />
</div>
);
For the time being, we will be just focusing on the functionality. Later, I will provide the CSS file I have created.
Notice that we have the searchFunction prop for the SearchBar component and the usernames prop for the Lists component.
Note also that we use the users state instead of the store state to show the data because the users state is the one containing the filtered results.
The SearchBar Component
This component is quite straightforward. It only takes the filterNames function as a prop and calls this function when the input field changes. Put the following code in components/SearchBar.js:
import React from 'react';
const SearchBar = ({ searchFunction}) => {
return (
<div>
<input className="searchBar" type='search' onChange={searchFunction} />
</div>
)
};
export default SearchBar;
The List Component
This component will simply list the names of the users. This goes in components/List.js:
import React from 'react';
const Lists = ({ usernames }) => {
return (
<div>
<ul>
{usernames.map(username => (
<li key={username.id}>{username.name}</li>
))}
</ul>
</div>
)
};
export default Lists;
Here, we again used the map method to get each item in the array and create a <li> item out of it. Note that when you use map to create a list of items, you need to use a key in order for React to keep track of each list item.
7. Track The Loading State
Let’s create a loading state with the useState hook to show when the data is yet to be fetched.
const [loading, setLoading] = useState(false);
Next, we’ll update the loading state in our data fetch method.
const getUsers = () => {
axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
.then((response) => {
const newData = response.data.results.map((result) => ({
name: `${result.name.first} ${result.name.first}`,
id: result.registered,
}));
setLoading(true);
setUsers(newData);
setStore(newData);
})
.catch((error) => {
console.log(error);
});
};
Here, we created a loading state and set it to false initially. Then we set this state to true while fetching the data with the setLoading state.
Finally, we’ll update our return statement to render the loading state.
return (
<>
{loading ? (
<div className="Card">
<div className="header">NAME LIST</div>
<SearchBar searchFunction={filterNames} />
<Lists users={users} />
</div>
) : (
<div className="loader"></div>
)}
</>
);
Using the JavaScript ternary operator, we conditionally rendered the SearchBar and Lists components when the loading state is false and then rendered a loader when the loading state is true.
Also, a simple loader was created to display the loading state on the interface.
8. Add Some CSS For Styling
Below you can find the CSS file specific to this example.
body,
html {
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
-webkit-text-size-adjust: 100%;
}
body {
display: flex;
justify-content: center;
font-size: 1rem/16;
margin-top: 50px;
}
li,
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul {
margin-top: 10px;
}
li {
font-size: 0.8rem;
margin-bottom: 8px;
text-align: center;
color: #959595;
}
li:last-of-type {
margin-bottom: 50px;
}
.Card {
font-size: 1.5rem;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
border-radius: 10px;
background-color: white;
box-shadow: 0 5px 3px 0 #ebebeb;
}
.header {
position: relative;
font-size: 20px;
margin: 12px 0;
color: #575757;
}
.header::after {
content: "";
position: absolute;
left: -50%;
bottom: -10px;
width: 200%;
height: 1px;
background-color: #f1f1f1;
}
.searchBar {
text-align: center;
margin: 5px 0;
border: 1px solid #c4c4c4;
height: 20px;
color: #575757;
border-radius: 3px;
}
.searchBar:focus {
outline-width: 0;
}
.searchBar::placeholder {
color: #dadada;
}
.loader {
border: 15px solid #ccc;
border-top: 15px solid #add8e6;
border-bottom: 15px solid #add8e6;
border-radius: 50%;
width: 80px;
height: 80px;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Conclusion
Throughout this tutorial, we used the Random User Generator API as a source of random data. Then we fetched the data from an API endpoint and restructured the results inside a new JavaScript object with the map method.
The next thing was to create a filtering function with the filter and includes methods. Finally, we created two different components and conditionally rendered our components with a loading state when the data is not fetched yet.
Over the last couple of years, React has grown in popularity. In fact, we have a number of items in Envato Market that are available for purchase, review, implementation, and so on. If you’re looking for additional resources around React, don’t hesitate to check them out.
