React Controlled Forms pt.2

In pt.1 of this blog I set up a frontend in React. In this blog I will be discussing setting up our backend and linking it to our frontend. Once we have accomplished that I will display the necessary adjustments you will need to make on the frontend to add a type of pizza. To start off we’re going to build a simple backend in Rails and we’ll call it our pizza app:

Now we’ll create our models and controllers and give this pizza class a pizza_type and price:

We’ll make an index action as well as a create action in our pizza controller:

Now don’t forget to migrate your database:

and to finish off this backend enable your CORS and fix your CORS initializer file. Don’t forget to run bundle install once you uncomment ‘rack-cors’ in your gemfile. Finally for the backend we will add a seed to our seeds folder:

Now run your seeds file:

Now that our backend is setup start your server with ‘rails s’ and then we can begin working on our frontend. First thing we are going to do on the frontend is open our App.js file. In here we are going to remove the things we have in state and make it an empty array again:

Now that our state is set to an empty array we are going to fetch our backend and set state to be equal to the pizzas that we already have in our seeds file that are saved in our database. In React to fetch your backend you will need to use the componentDidMount lifecycle method. Inside this method the fetch looks pretty similar to regular JavaScript:

In this lifecycle method we’re fetching and we are parsing our response just like you would in plain ol’ JavaScript. The thing that is different for React is that we are setting our state with the response we are receiving from the backend. I did it this way so it would be easier to see what is happening however we can refactor the set state .then a little more like so:

and even further:

Now we are going to open our PizzaForm.js file and we are going to start making some changes to the form so that it will work. First off this should be a class component, we will be dealing with state here. Our state should look like this:

Now that we have this in state we can add a onChange event listener to the inputs in our form. By doing this we are able to change the value to whatever text we would like in the input fields:

First we will create our function for the onChange event listener and we will call it handleChange:

Now when we type in our input fields the value of whatever we type in will display correctly. For our onSubmit event listener we are going to have to do a little more. Our pizza state lives in App.js so to manipulate that state and add a new type of pizza we will need to make our function in the same place as the pizza state. We will then pass this function down as props to our PizzaForm.js file and call it in our handleSubmit function. Here is what our function for adding a pizza will look like in App.js:

Now pass this function down from App.js to PizzaForm.js as props:

Now we can open up our PizzaForm file and build our handleSubmit function:

However if we submit a new pizza like this we will get an error of undefined. We need to pass something to our addPizza function that has the value of what we are submitting, lucky for us what we are submitting already lives in our state of pizza_type. So we will call this.state here:

and now to finish we will add our onSubmit event listener to our form and call our handleSubmit function:

To make sure that this all works correctly go to your localhost:3001 or whatever page your frontend is open on in your browser and try and create something (If you haven’t already the command you type in your terminal to start your React server is “npm start”). Once you create something refresh the page and your new item should survive the refresh, and now you have successfully created a React Controlled Form!