DEV Community

Cover image for Filter Your React Data With Basic Javascript
Chris Hansen
Chris Hansen

Posted on

Filter Your React Data With Basic Javascript

You fetched some data in React, now what?

Don't just map through your data right away.

Recently, one of the first things I like to do whenever I'm working with data, is to use basic javascript to add some user friendly "reactivity."

My aim is to make this quick, and impactful. Let's get straight to it


Preface and Resources

Although this is quick and beginner friendly example, I'm assuming you have some working knowledge in:

  1. HTML & CSS
  2. React
  3. Fetch
  4. CSS in JS

Let's take a look at an e-commerce example

e-commerce example of a products grid or gallery

A gallery or grid just like this one, showcasing the entire stores products may be something you see, when initially arriving at an e-commerce website.

portfolio website example of a projects gallery

Or how about your portfolio? You may have all your projects displayed beautifully. However, wouldn't it be better if we gave our users the ability to filter our projects by technologies like Vue or React or our stores products by category?


Fresh create-react-app project.

Let's start off with our trusty create-react-app. I left all pre-loaded files and CSS alone. Only thing I did was removed the boilerplate code in our App() and the logo.

First, let's import useState and useEffect in our app like so:

import { useEffect, useState } from 'react'

Then, in our terminal let's install our choice of CSS in JS library like so:

yarn add styled-components // yarn
npm install styled-components --save // npm
Enter fullscreen mode Exit fullscreen mode

Next, let's import our library like so:

import styled from 'styled-components'

Lastly, I moved the React logo png from the /public folder into our /src folder. Then I renamed it to react-logo.png. I will use this image for our loader later. Import it into our App.js like so: import Logo from './react-logo-.png

All our imports at the top should now look like this
Our imports example at the top of our code editor


Let's knock a few things out in index.js next

We're going to add global styles to our app so we can adjust the body and html how we like. At the top of index.js:

import {createGlobalStyle} from 'styled-components'

Next we're going to create a GlobalStyles variable and add some styles to the body and html. It should look like this:

How globalStyles should look
Lastly, above our <App/> component in ReactDOM.render() add our <GlobalStyles /> component. Don't forget to add the theme prop with our GlobalStyles variable as it's value, like so:

How to wrap our app component
That's it for index.js!


Back in App.js lets set up our state

We're going to need two pieces of state. A products state, and a loading state.

  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
Enter fullscreen mode Exit fullscreen mode

We're expecting an array of data for our products, so we'll initialize it with an empty array. We also want a loading state, so users know things are happening in the background, while fetching data. Like a spinning logo for example.


Let's get some data

Let's start with a function that handle our fetch request.
We'll be using the fetch api. I prefer to use two variables. One for fetching our endpoint, and one for storing our results. It looks like this:

const fetchproducts = async () => {
    setLoading(true);
    const req = await fetch(`https://fakestoreapi.com/products`);
    const products = await req.json();
    setProducts(products);
    setLoading(false);
    console.log(products);
  }
Enter fullscreen mode Exit fullscreen mode

We're also setting the loading state to true during our request, and once we have our results, setting the loading state back to false. We should also console.log() our products, to make sure we are indeed populating our state with data. It'll also make it easier to see our response from the API in chrome dev tools.

If you'd like to learn more about the Fetch API and async functions check out this resource.

Lastly, let's use our useEffect hook.
Below our state, and fetchProducts() function, let's call our request:

useEffect(() => 
  fetchProducts();
},[]);
Enter fullscreen mode Exit fullscreen mode

We have our state, we have our data, now let's start creating our components

We are going to need a Grid, Product, Price and Image and Loading component. And don't create new files, as we're building custom styled components.
Below our App() but before our export let's begin creating our components.
styled-components example

styled-components example

styled-components example

styled-components example

styled-components example


Let's add our components to our App()

Adding our styled-components to our app

Now that we have our layout, you're probably noticing we're not using our data from our state.
Let's map through our products array like so:
How to map through our state

Let' take it one step further. Let's take a preventive measure, and make sure we only render our products if we indeed have data in our states product array. And, we'll only render our data if we are no longer fetching the data from our API. A very simple way to handle this would be a ternary operator. Let me explain what's happening here in pseudocode: if notLoading AND if weHaveData ? mapThroughOurData : ELSE render loadingComponent.

How to use a ternary operator with our map

Hopefully, everything is working properly. If you are running into any problems, please hit me up on Twitter!


You should have a fully responsive web app displaying content from the Fake Store API.

However, we have not added that spicy "reactivity" yet.
Let's do that next!

  1. Let's add a query state to our App() component. Go ahead and add const [query, setQuery] = useState(''). Our state should now look like this: our state
  2. Next, we need an event handler to handle the users input, and update our query state. It looks like this: our filter function
  3. Next, let's build our Input as a styled-component. It should look like this: styled-component example
  4. Add our Input component to our App component and add the onChange prop and set it to our handleUserQuery function like so: Add to onchange even handler to our component
  5. We're almost done! Let's add the secret sauce. We're going to create a simple function and its only responsibility is to filter our products state by filtering out everything that does not match the users input. It looks like this:
  const filteredProducts = products.filter(product => 
        product.category.toLowerCase().includes(query.toLowerCase()) || product.title.toLowerCase().includes(query.toLowerCase())
    );
Enter fullscreen mode Exit fullscreen mode

We're simply filtering out any products that do not match our users input. Our users will be able to filter their results by searching for
categories or titles.

  1. Lastly, instead of mapping through products in our Grid component, let's instead map through filteredProducts. Replace products with filteredProducts and that's it! The store should render all the same, accept the user now has the ability to filter results according to the way they search for their products.

Conclusion!

That's a wrap for Filter Your React Data With Basic Javascript The idea was to inspire you to take this concept, and use it the way you see fit! Wether that's for an e-commerce store, a photo gallery, or your projects for your personal portfolio! You can get really creative with some basic javascript If something doesn't make sense, or you find an error, please don't hesitate to yell at me on Twitter!


Are you a beginner web dev on the learning journey!?

Check out some of these articles also written by me!

Discussion (0)