React to this, React!
This is a walkthrough on how I built my filter option for my list of users. So, if you’re looking for how to do that, in a class component of React, continue on! I may give this a go and convert it over to a functional component just to see if I can, but for the moment, it’s just the class component.
I’m not going to cover building the individual components and this presumes you’re at this point, but might be a bit stuck on getting something working. So if you have your class component, and your data, you’re ready!
Part 1: Getting the data
First thing first, we set our initial state of the Redux store and the page renders for the first time. Don’t panic! This happens so fast, it’s like it never happened. Just know that it’s there, and it can hang you up if you’re trying bring in data for a function or render before it’s available.
Next, fetch is out getting our users from our API asynchronously . In my application, this a RoR PostgreSQL database with about 20 users. So a small database, and I mention this because if it were millions of users, it would probably make more sense to filter on the backend instead of sending over all users to the front end to filter there. This is just a trade off in time: Do they wait to get the data or wait for each filtered search? Not a concern for me since my app is so small!
So just a split second ago, our component rendered for the first time, giving it space for our componentDidMount() function, which calls other objects (functions in my case) after the first render.
We also need to make sure it has a place in the component, so it’s placed inside a componentDidMount(). We’ll be coming back to this in a moment.
Now, mapStateToProps (MSTP), along with data from fetch, is ready to set our users into the Redux store as an array of objects, and make them available locally in this component as a property of state (state.props.users).
It’s at this point the page renders for the second time, and everything is working!
Part 2: Working with the data (or the fun part)
Awesome! We’ve got our users on the page, and now let’s filter them. For this example, I’m going to filter by user.city, but you could do this with any value of your objects.
First, we set up an initial state for the searchValue as an empty string. Sure, you could do this after making the input, but React will yell at you saying your searchValue is null. React is really good at yelling. Be sure to listen to it!
Second, we need an input for the user to type into. Nothing tricky here, unless you’re using Semantic UI. Turns out their <Search> component doesn’t quite function the same way as a regular <input> field. Who knew?!
Be sure to include the value as being the state of the searchValue we just setup, and make this an onChange event, so that when a user changes the state, something happens. In this case, anytime a change to this field is made, the this.handleChange function will be called back to. Did we mention callbacks?
Whoa, didn’t you just say to callback to the this.state.searchValue? Well, yes, and here’s a cool trick. Suspend reality for a moment and pretend you had a form with 5 fields, or 10 fields, or worse… imagine you’re building out a form for the IRS, it’s crunch time and you’ve got to get this digital tax form out. Well, instead of having to write out each targeted object name and it’s respective value a half million times, you can instead pass in “event” (or “e”), and it will read each field for you. It’s like iterating over the form. In my case, I have just one field, so it’s overkill without being overkill. Plus, it allows for easy extensibility later.
Now for the fun part, and it’s honestly pretty simple logic. Basically, if the search area (searchValue) is exactly equal to the initial state, in this case an empty string (“”), return the full list of users. Else, if the user has entered something into the search area (searchValue), then filter the users based on that search criteria, and then map over the array of user objects.
Is this perfect? No, and I definitely see room for improvement and refactoring. Does it work? Yup! Get it built and then fix it. Can’t fix something you don’t have.