Nowadays, e-commerce applications comes with lots of items in them. These items can sometimes be very had for customers to find what they are looking for easily. Most customers are impatient to be scrolling and be looking for what they want.
As developers, our goals is to solve problems and make life easier for users. Adding a filter functionality to an e-commerce application will not only help customer to find what they are looking for easily, it will also improve the user experience which will lead to increase in sales.
Today, we will discuss how to implement filter functionality in React js.
Prerequisites you need to understand this article
- Basic understanding of HTML.
- Basic understanding of CSS.
- Basic understanding of JavaScript.
- Basic understanding of React js.
- You must have Node js installed on your computer (for your React application to run)
- And finally, a web browser like Google Chrome.
For this article, I will be using an online code editor called Codesandbox. You can go ahead and use it as well, you can also create normal React js application on your computer.
Codesandbox is an online code editor that allows developers to write code on the web even without their laptops. It safes a lot of time, instead of installing React js, Next js or any other framework, codesandbox allows you to choose them in seconds insteading of wasting time to install them. It allows you to equally select libraries too in seconds. This is amazing right? The most interesting part is that it has free version you can use.
Now, let's dive into the exciting world of React.js and start building our filter functionality!
Let`s talk about the filter method in JavaScript. Filter method in JavaScript returns the items in an array that matches with the logic assign to it.
It returns a copy of items that satisfy a specified condition.
`
const languages = ["java", "php", "javascript", "css" "c"];
const selectedLanguages = languages.filter((lang)=> lang.length == 3)
console.log(selectedLanguages)
// expected result is css and php
`
Why are we getting only css and php? because these are the only items in the array that have 3 letters. Every other items in the array is either above or below 3 letters. If you check the logic of our code, you will clearly see that we are looking for items with 3 letters.
That is how filter method works in JavaScript, it returns items that matches with the logic you assign to it. In our case, we store those items in a variable called selectedLanguages
`
import { useState } from "react";
import "./styles.css";
export default function App() {
const data = [
{
id: 1,
name: "Shirt",
price: 300,
image: "https://m.media-amazon.com/images/I/81n3upEij0L._AC_UL320_.jpg",
},
{
id: 2,
name: "Shoe",
price: 10,
image: "https://m.media-amazon.com/images/I/61VrbOtzDXL._AC_UL320_.jpg",
},
{
id: 3,
name: "Watch",
price: 30,
image: "https://m.media-amazon.com/images/I/71E00KpHBvL._AC_UL320_.jpg",
},
{
id: 4,
name: "Bangle",
price: 5,
image: "https://m.media-amazon.com/images/I/613xQziz5HL._AC_UL320_.jpg",
},
{
id: 5,
name: "Necklace",
price: 300,
image: "https://m.media-amazon.com/images/I/6191eeBha+L._AC_UL320_.jpg",
},
{
id: 6,
name: "Ring",
price: 3,
image: "https://m.media-amazon.com/images/I/618fjry4-tL._AC_UL320_.jpg",
},
];
const [items, setItems] = useState(data);
const pricesCheck = (itemPrice) => {
const newItems = data.filter((product) => product.price <= itemPrice);
setItems(newItems);
};
return (
Search by prices
<button onClick={() => pricesCheck(5)}>$5</button>
<button onClick={() => pricesCheck(10)}>$10</button>
<button onClick={() => pricesCheck(15)}>$15</button>
<button onClick={() => pricesCheck(20)}>$20</button>
<button onClick={() => pricesCheck(300)}>$300</button>
<div className="items-con">
{items.map((item) => {
return (
<div className="menu-item-con" key={item.id}>
<img src={item.image} alt="" />
<div className="item-name-price-con">
<p className="food-title">{item.name}</p>
<p>${item.price}</p>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Provident eveniet suscipit atque eius ab sunt cum perspiciatis
harum laborum natus?
</p>
</div>
);
})}
</div>
</div>
);
}
`
Here is the result
Let`s break the code down
We created an array of objects, which is obviously the items in our application. I intentionally used this method so that you can understand me better. In a real world example, the items might be coming from an API.
const data = [
{
id: 1,
name: "Shirt",
price: 300,
image: "https://m.media-amazon.com/images/I/81n3upEij0L._AC_UL320_.jpg",
},
{
id: 2,
name: "Shoe",
price: 10,
image: "https://m.media-amazon.com/images/I/61VrbOtzDXL._AC_UL320_.jpg",
},
{
id: 3,
name: "Watch",
price: 30,
image: "https://m.media-amazon.com/images/I/71E00KpHBvL._AC_UL320_.jpg",
},
{
id: 4,
name: "Bangle",
price: 5,
image: "https://m.media-amazon.com/images/I/613xQziz5HL._AC_UL320_.jpg",
},
{
id: 5,
name: "Necklace",
price: 300,
image: "https://m.media-amazon.com/images/I/6191eeBha+L._AC_UL320_.jpg",
},
{
id: 6,
name: "Ring",
price: 3,
image: "https://m.media-amazon.com/images/I/618fjry4-tL._AC_UL320_.jpg",
},
];
You can use this free API endpoint to access random list of items that you can render and filter based on your preference. Here is the website.
We then created a useState where we stored those array of objects which will enable us to map through them and render them on the screen. This approach will also help us to determine what we will render.
const [items, setItems] = useState(data);
We also created a function where we made use of the JavaScript filter method to determine which itmes we want to render. As you can see, we instructed JavaScript to only return items that matches with the logic we gave and store them in a variable called newItems. After that, we update the items state with the newItems so that we can render those items we want on the screen.
The pricesCheck function we created has a parameter called itemPrice. Whenever a user clicks on the button, the function will be called. Each button has a specific price on them (argument), which will help users to determine price range of items they want to see.
const pricesCheck = (itemPrice) => {
const newItems = data.filter((product) => product.price <= itemPrice);
setItems(newItems);
};
The remaining part is the jsx where we render each items and the buttons for filtering.
<div>
<div className="btns-con">
<div className="prices">
<p>Search by prices</p>
<button onClick={() => pricesCheck(5)}>$5</button>
<button onClick={() => pricesCheck(10)}>$10</button>
<button onClick={() => pricesCheck(15)}>$15</button>
<button onClick={() => pricesCheck(20)}>$20</button>
<button onClick={() => pricesCheck(300)}>$300</button>
</div>
</div>
<div className="items-con">
{items.map((item) => {
return (
<div className="menu-item-con" key={item.id}>
<img src={item.image} alt="" />
<div className="item-name-price-con">
<p className="food-title">{item.name}</p>
<p>${item.price}</p>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Provident eveniet suscipit atque eius ab sunt cum perspiciatis
harum laborum natus?
</p>
</div>
);
})}
</div>
</div>
Furthermore, you can also improve on this logic or also include categories so that you better understand the concept of filter method in JavaScript.
Now you have seen how easy it is to create a very nice filtering functionality with React js and css. This example is beginner friendly.
Conclusion
Filtering functionality is very important and nice to be in your application. It enables users to find what they want easily.
The JavaScript filter method returns list of items that matches a specific logic assigned to it.
Now, i believe that you can easily implement this amazing functionality to your applications to foster good user experience.
Happy coding
Top comments (0)