Filter data by category with React Native and Styled-Components.
Since this is my first time blogging let tell you a little bit about myself. I'm a junior full-stack developer. I mostly code in ReactJs, React Native, NodeJs, and MongoDB. I'm not an expert and I'm still learning every day, I love to code because I love to create things that can help people. My reason for creating a blog is to help me grow as a developer while helping others. So if you see areas where I can improve or have any constructive criticism please don't be afraid to share your thought with me.
First, we’re going to start with creating some data. We need a Categories array with the name of the main muscle and a subCategory array with specific muscles that make up the main muscles.
Let’s set up our styles with Styled-Components
Creating the handlePress filter (Category)
Finally, last start working on our filter!!
First, let’s create a state variable called newList. Then we’re going to create a function called
handlePress with a parameter called “name”.
Next inside our handlePress function, we want to create an array named “listings”.
Now we need to implement an if / else statement to check if “name” (the tab we pressed on) equals “All” if it does then we want to show all exercises.
If not (Else), if “name” (the tab we pressed on) equals muscles.mainMuscle we want to show exercises for that specific muscle.
Lastly, we want to setNewList(listings)
Rendering the Category List Tabs
To create our tabs, we’re going to map through our category list (data.category.map()) and return the category’s name.
Rendering the Exercise List
For us to be able to scroll through our list we need to wrap our TabsContainer with <ScrollView> </ScrollView> tags.
Next, to make it scroll horizontally you need to add horizontal={true} and you can also add showsHorizontalScrollIndicator={false} if you want to hide the scroll bar.
Ok, now that we have our tabs and they are clickable, we can focus on rendering our exercises.
To do that we have to map through our newList array (newList.map()) and return the exercise name.
Creating the handlePress filter (Sub Category)
Now we’re going to create a state variable called SubCat.
Then we’re going to create a function called subHandlePress with a parameter called “subs”.
Next inside our subHandlePress function, we want to create an array named “subListings”.
Now we need to filter the exercise array (data.exercise.filter()) then check the muscleGroup array to see if it includes sub muscle name and return an array of exercises that includes the muscle
Lastly, we want to setNewList(listings)
Rendering the Sub Category List
We want to use a ternary to check if our subCat array length is greater than 0.
If it is then we want to map the array and return the list of subcategory names
Else null.
