React Controlled Forms pt.1

In this two part blog I will be discussing Controlled forms in React. “Controlled form” means that the inputs from the form get their value from our React state. In this first part of this blog series I am going to show you how to set up the start of this app. In the second blog in this series we will connect the React form we are going to build in this blog to a backend in Ruby on Rails. Then we will make all of the necessary adjustments in our React app to communicate with the backend and the database.

So to start off our React frontend we will need to create a React app from our terminal. To do this type in “create-react-app [insert-app-name]” into your terminal. For this example I’ll build a simple pizza app where we can add a type of pizza using our form. Here’s the command for creating a React app.

Now once this command is done creating your app open it in your text editor and go into the src folder and the App.js file. In here we will need to remove some things that we aren’t going to be using. Once you have removed everything that is arbitrary your App.js file should look like so:

You can also remove the className=”App” here if you’d like. Now that this is done we will need to change this from a functional component to a class component. We need this to be a class component so that we can use state. Here are the adjustments required for this as well as the state that we will be using for this first part:

Now, since we aren’t using a backend at the moment we are going to add a couple of things to our pizzas array in state:

Since we aren’t using an actual backend with a database I am just going to put our own id numbers in, keep in mind this is not the same as the id’s that are produced in the backend (if we made another pizza this way we would have to insert the id ourselves). In a database the id’s automatically increment with each new input.

Now we are going to create a new component called PizzaList and we are going to pass our state down to this new component as props. You may have seen this in the picture a second ago but here it is again:

Ignore the PizzaForm file for now we will build this out later. Now for organizational purposes as well as basic React etiquette we are going to create a components file and in this folder we will put our PizzaList.js file:

Now we will also need to import this file in our App.js file because this is the highest level component in our app:

Once again just ignore the PizzaForm for now. Next we are going to open the PizzaList.js file we created in our components folder and we will build the start to a functional component:

In PizzaList we are going to do a few things, first we want to call our props as the argument and we are going return a ul instead of a div. We also want a function that will iterate over our pizzas state that we passed down as props. Here’s what the final product of this file will look like:

With this code you should see the types of pizza displaying on your screen if you start your server by running the npm start command:

Now that we have this we will start to build our form. In App.js we are going to add our PizzaForm component to our render function, then we will add the new PizzaForm.js file to our components folder:

Also be sure to import this in App.js:

Finally, to end this blog we are simply going to start out our form and in the next blog I will show you all of the methods necessary on the frontend to add a new type of pizza to our list. This PizzaForm component should be a class component since we will need to manipulate state later on, here is the form to start with:

Stay Tuned!