Part 2: How to Integrate Multi-select into Your React App
Hi there, I’m back with part two of my multi-select react component and how to utilize it to post data to a local server. If you read my other blog about using the multi-select via a form to patch data to a local server, this one will be way simpler, and you’ll notice that some of the things I write about in this one will echo some of the same information as the last one. And, if you haven’t read it, I’ll link it here. Now, let’s dive in.
Notes about what I’m using…
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.
Using a Multi-Select with a Local Server
Like in my last blog, I’ll utilize a form to collect game information from a user to post data to the local server and have the data persist. Again, I want to note that I’m using useState to track the form data. Here’s a look at my setup if you’re curious.
You’ll notice I’ve set my genres key to an empty array. This will be important later when you’re handling the data coming from the multi-select and how that data will ultimately be saved to your local server.
Now, let’s narrow our focus to the multi-select component. We have a few things going on here. ‘selectedValues’ is set to ‘formData.genres’, which is my useState variable. ‘isObject’ is set to false because, in this case, I do not want the options to be treated as objects at the form level. ‘onSelect’ is set to an arrow function called ‘handleSelect’ which takes the options item and sets the state of the form data, effectively formatting the selected genres (by the user) inside of the array first initialized with the ‘initialFormValues’ object. Below are the genre options as an array of strings.
Here’s a screenshot of the ‘handleSelect’ function:
The form has an onSubmit event set to a function called ‘handleSubmit’. As expected with a form submission, there is the preventDefault method. Below that, I have a variable named ‘genreArray’ that takes the selected genres in the form data and iterates through the array to essentially reformat the array to an array of objects with keys set to ‘name’. With the reformatting in place, I’ve put together all of the new form data and assigned it to a variable called ‘newSavedGameData’. This will ultimately be the variable that I send to the local server.
Lines 44–57 consist of my fetch request when I use the ‘newSavedGameData’ variable data to post to the local server and then have that data rendered on the front end (aka pessimistic rendering). Finally, on line 60, I’m resetting the form data to their initial values. Now let’s add a game and see what happens!
That’s it! We’ve successfully used the multi-select component to add data to our local server. Here is some additional information on the multi-select component that I used:
I always seek new ways to learn and improve my code and writing. So, if you have any suggestions, please let me know in the comments.
Thanks in advance!
-Tricia {:
