How to Handle Arrays in React & Ruby on Rails
Hello, world!
Recently, I pitched my final project for coding bootcamp. Foolishly, I thought this project would be pretty straightforward, and I’d be able to breeze through to graduation (and maybe even have some time to work on my portfolio!)
Alas, coding is rarely as easy as it seems it will be at first glance. The project that I’m working on is a recipe app, where users can upload, view, and share their favorite recipes. In order for a user to post a recipe to the app, they need to provide a variety of details on the recipe, including a list of ingredients and a list of instructions. I’ve created a few different React forms that interact with a Ruby on Rails API in the past, so I thought nothing of that… until I realized I needed to figure out how to store and manipulate arrays, not just strings and booleans.
In this article, I’ll provide a step-by-step walkthrough on how I created arrays in my Ruby on Rails API as well as the method I used to create arrays in a form using React & posting them to the API.
Array Migrations in Ruby on Rails
The first place where this method strays from a standard string manipulation is the syntax for setting up your migrations in your API. I’m using Ruby on Rails for my API, so I went into my migrations, and I followed a process I found on this blog. Basically, this code is informing your database to expect an array of strings instead of a singular string.
After this, you can go ahead and run db :migrate like normal.
Changes to State
The next place where your method will change slightly is in the declaration of state. As you can see the syntax is very similar, but instead of a string, you’ll instruct React to accept an array with an empty string instead.
Instruct “Create” Function to Accept Arrays
Let’s move back to the backend of the app for a moment.
Here, we’ll go the the respective controller for the form you are working on. In order for the backend to persist data entered in the form, we need to set up a “create” function in Ruby (see lines 4–7 of the above code).
The create function references recipe_params in this example. In the params, the underlined portions are instructing Ruby to expect two arrays (ingredient_list and instruction_list).
Create an Unordered List in a JSX Form
This is the trickiest part, in my opinion. You need to set up an unordered list, then dynamically add in each new input, which will in turn, create new list items for each input, where users can store each new list item as a string.
Store List Items as an Array Using Functions
The last step is to set up your functions: this is how the process described above can come to fruition.
The addIngredient() function allows new strings to be added to the end of the array while updateIngredient() handles the users ability to add new input fields with the click of a button.
From here, the process is very similar to handling strings.
Thank you so much for reading! If you have any questions about this article, you can reach out to me here or on Twitter. Happy Coding! 😊 💻
