React for Beginners #6 — Learning about State via the medium of forms.

This is part 6 of my React Learning series. Using knowledge gleaned from Wes Bos’ React for Beginners. Last time we explored:

• Events
• Binding Methods
• Form submissions
• Changing URLs in React Router

Before we delve further into user input we need to look at State. Which is nothing to do with Will Smith or Wyoming:

State is a really fundamental concept in React. At its core, it is a simple thing, lets say it out-loud together:

State is an object that holds data for a component that is available to itself and child components

This acts as the single source of truth for all parts of the application to refer to. Whenever State changes, React reacts to the change and updates components that use that information. In this post we will use a User Profile creation as our example data we want to put into state.

The process for adding things to state can be broken down into a few steps:

1. Generate some data we will want to put into State. This will come from a form submission event in our example.
2. Set up the state in the App component. An object where we want to put the required data.
3. Build a method that inputs into the state. This is done on the same component that holds the state
4. Pass that method to the component that will produce the data we want to input

This is essentially a recap of our work in using references in my previous post.

1. The form we build should be a component for easy reuse so lets do that. You can copy an existing component and tweak. Remember to export it, and import and add the form to the component(s) that require it.
2. The component will return a form, build that according the data you wish to capture. Don’t forget a button to submit! Some example fields are:
3. Add an onSubmit method: onSubmit={this.createProfile}
4. Add a createProfile property on the component, passing through event : createProfile = (event) => {...}. You can use a method but you must bind it.
5. In the property. Add the preventDefault method to stop the refresh on submit: event.preventDefault()
6. Add refs props to your form fields: ref={this.nameRef} for example.
7. Add the refs to the component: nameRef = React.createRef();. Note that there will be a bunch of references youll need to create..
8. In the createProfile property we want the refs to be passed to state, so you might want to combine the refs into an object:
9. const profile = { name: this.nameRef.value.value; etc. } (Note that everything will be a string when plucking values in this way, so you might need to convert depending on what you are capturing)

So if you have done that right, you will have a form that spits out an object containing the values that were set… but were should they go? They should go into the State

The profile object the form creates needs to be sent into State. As this particular information will be used in several components, we have to add it to the App Component. The app component is the parent of all components so state can be shared with its child components. You can use local State for local data.

So on the app.js, we define what we want the empty state to look like. We can either:

1. Use the constructor() method and define it.
2. Use a property to set it up.

Let’s go with number 2 and our empty state in App will look like this:

state = { profiles: {} }

Building a method to Add to state

Now in order to update state, we first need to have a method that must live in the same component. This method must do three things:

1. Make a copy of the existing state to avoid mutations.. We can make a variable and spread for this: const profiles = {...this.state.person}
2. Add the profile to the profiles object: people[profile${Date.now()}] = profile
3. Add the new profiles object into state using a method call setState:

this.setState({profile: profile})

The finished method should look like this:

Passing the method to where the data is produced

Now we have a method, how does our form,which is several levels down have access to this method? See the ….’diagram’ below

• App (Method Source)
• Profiles
• Add Profile form (Needs to use method)

Well that’s a job for our old friend props! We add these props to each component

<Profiles addProfile={this.addProfile}> - In App.js it is a component property

<AddProfileForm addProfile={this.props.addProfile}> - In Profile.js, its part of props.

Use the method we passed down through props

In the AddProfileForm component, in the createProfile Property we add the following line:

this.props.addProfile(person) - This will run the property from App.js.

And there you go, the data in the submitted form should appear in the App.js State Object!

Finishing Touches and Conclusion

Once submitted, since the page doesn’t refresh, you can reset the form doing event.currentTarget.reset()

There are quite a few steps in updating a central state from an individual form component but by breaking the job into small pieces you can avoid panic:

1. The App component needs a state object created.
2. The App component needs a method created that updates a part of its state with a given input.
3. A form component is created to get the data with which to update state with.
4. The inputs are given refs which are set up in the component.
5. The User fills out inputs and clicks submit button.
6. The submission triggers the onSubmit event which calls a property on the component
7. The property gets the forms inputs via the ref and creates an object bundling them together
8. The property runs the App Component’s updateState property method that was passed from the App Component via props.

Just take each little bit at a time and you’ll be fine. Of course it doesn’t just apply to forms but thats for another post…