How to filter in React?

Filtering can be pretty tough as a beginner to React. It took me days and a lot of practice to wrap my head around it. I know this blog will be helpful to anyone that is on the same struggle boat as I was. I am going to give you a walkthrough from one of my favorite labs I did to practice filtering.

Filter.js

The component above shows a code snippet of the filter dropdown which has an onChange event that takes in a callback function with the parameter of event.target.value to send back to the parent where the filterStocks function is defined. We are also passing the value attribute to props.filterTerm from the parent components state, this makes it a controlled form. Please note that filterStocks function and filterTerm state was sent down as a prop from the parent (MainContainer.js) (See below)

MainContainer.js

filterStocks function is setting the state to the value attribute of each dropdown option. In this case, it will depend on which option the user picks. If a user clicks “All” set the state to all, if a user clicks “Tech” they will set the state to “Tech” etc…

The next step will be to decide how we will be rendering the stocks and this will come down to conditional rendering. In the parent component, I defined a function that will decide on which stocks to render to the page based on the filters state change. (See below)

MainContainer.js

The whichStocksToRender function will be used to map through each of the stocks based on which condition is true and return <Stock/> components for each. My original array of stocks is stored in the state as stocks. So if a user filters by “All” it will return the original array and if the user picks any other option, it will filter the original array by the type of stock the user chooses.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A month of React Native: part #6

5 Tips when designing Graphql Schemas

Composi/core — A Library for Functional Components with Redux-like State Management.

Keys and Why We Need Them…

Building a Netflix-style card carousel in React Native

Gathered Thoughts

What Is Masonry Layout And 18 Examples In Web Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Natalia Wit

Natalia Wit

More from Medium

Introduction to React Hooks

Features of ReactJS

Sinatra and React Project !

React/ State and Props