How to Integrate Multi-select into Your React App
I was recently working on a project with a friend, and I needed to integrate multi-select functionality into the feature I was building. I discovered this great multi-select react dropdown component that I could incorporate; however, being somewhat new to this workflow, I wandered into the unknown. It has pretty good documentation, but I still needed to figure out how to implement it into my specific scenario. So, this is where this blog comes in. Once I figured it out, I decided to write this blog in case there’s anyone else in the same boat. So, let’s get to it.
Links
Here’s the component that I am using in this project. Feel free to look at the project if you’d like. It’s still a work in progress. Here’s where you can find some additional information about the component. Make sure to follow the installation and import instructions. You should have your component setup as well. I will also put a whole list of all the links at the end of the blog.
Using the Multi-Select with an API, and a Local Server
For this project, we grabbed data from an external API and saved it onto our local server. We wanted to allow the user to edit the data held there. Here’s a snapshot of the API data:
Our project consisted of video games and different information about them. Since each video game can have multiple genres, I decided integrating a multi-select component would be appropriate.
Something to note is that the genres portion of this API consists of an array of objects. This is important to remember, and we’ll understand why that is later. But first, let’s take a look at the JSON file.
And this is what it looks like after we save a game to our local server.
Now in games, we have an array with an object. This object has the name, id, genres, ESRB rating, Metacritic rating, and background image. So again, what we’re focusing on here is the genre data. And in the genre data, we have a similar format, an array of objects, and each object contains several pieces of information, but in this case, we’ll only be utilizing the name and value.
Our Goal…
We aim to make/remove different genre selections while editing the game card.
What happens when we hit save?
The overall structure of the data is the same. We have an array of objects, but instead of having all that extra information we didn’t care for, we now have precisely what we need; the genre names and corresponding values.
How to get here, and what do we know?
Well, for starters, we’re submitting a form. This form should have the items of the card plugged into the inputs, values, and selected as a starting point. We need to utilize useState to track the changing variables.
For the multi-select, we want the ability to add/remove the genres from the card. Again, we’re using an array of objects for the game data, so to patch this data correctly, we’ll need to ensure that we’re sending an array of objects. Otherwise, you might find yourself storing empty arrays, nesting objects, or even failing to patch the data entirely.
Let’s take a look at the form…
With useState set up to track the changes in variables, you must ensure you’re setting up your initial values for state correctly. Here’s a look at mine:
You’ll see I have useState set to a variable initialState, where we have an object. This object has a genres key set to an empty array. This initial setup will allow us to add objects inside, which is the exact structure we need.
Now let’s take a look at our Multi-Select Component…
In its most basic form, it looks like this:
You can check out the basic usage on the main page for the component here.
In my application, this is how I have the component:
I added a class for styling purposes. You’ll see that I left onKeyPressFn alone here. I could’ve removed it, but I left it just in case I wanted to implement that feature in the future. Options point to a variable called multiselectOptions:
We refactored this for two reasons. One for readability in our code, and two because this allowed us to iterate over the array of options and convert them into objects. As you can see on line 21, we used map() to return an object with the key of name and the value being strings of options.
Now that we’re formatted our array so we can use it to patch the data on our local server, we need to cover a few component options. Let’s take a look at lines 98 and 99:
We have set isObject to true to tell the component that the options it’s working with are now an object because we converted them with the map() function used above. Because this variable is now set to true, we need to tell it what key name to look for. We are doing this on line 98 with displayValue.
A quick note for line 101. For our EditGames component, we are utilizing useParams and useHistory to access the specific card data I’m trying to manipulate with my edit form. Feel free to check out the blogs linked if you’d like to learn more.
Now let’s take a look at lines 103 and 104. Both lines point to a function called handleChangeMultiselect. Here is that function:
In this function, we’re creating a variable called newGenres, which takes the current genres array, iterates through it, and returns an object with a key of name and the current genre's value of name. It then uses the set state function, named setFormData, and updates the genres array with objects of different key names and their corresponding values.
That’s it! If you have the rest of your form and patch requests set up correctly, this should allow you to utilize a multi-select component to edit data more interactively in your form.
I also used this multi-select component when posting/adding data to a local server. I will be writing a detailed blog on that as well in the near future, but for now, here are all of the important links:
If you have any questions, let me know! I’d love to help.
-Tricia
