Understanding React Controlled Forms

I have been learning React for a week, and already having a bad time with understanding state, I decided to take a step back and breathe, I gave myself a pat on the back and watched a bunch of youtube videos on state.

I figured that the best way for me to understand state was through understanding forms first. So the next questions popped, and I needed answers.

Controlled Form Vs. Uncontrolled Form

Talking about a controlled form, lets think about the following: If we have a form with multiple inputs, each one of this input fields has to be controlled by the state, and has to have an onChange event listener so we can update the state (setState) every time the input is being changed.

In most cases, React recommends using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

1.First let’s set up the initial state for the input we want to control

Remember, every time a component is about to be rendered, the first lifecycle method that is called, is the constructor, that is why, we’re going to set our initial state inside that method.

In this case our key is value and our value is set to empty string “”

2. Set our input value to the current state and add Event listener

In this case, since our initial state is an empty string, our value attribute the input, will just be set as an empty string. In order for us to make it controlled, we need to add an onChange event listener on the input, and assign a callback function to it.

Notice that the first input in this form is controlled, and the second one is uncontrolled

3. Building up our Callback Function.

In this step we will update the state with the setState method. This method takes in an object, in this case we will set our ‘value’ to the input sent by the client. And now we have a controlled form!!!

setState is a React method that will take an object as an argument

Some examples on how to control form tags.

1. - CheckBox.

Let’s remember the steps:

• set initial state inside the constructor, as false so our checkbox is unchecked.
• since the checkbox doesn’t need a value, we’ll just add an onChange event listener that will trigger our callback function
• In the callback function we will update the state with setState and give it the value of the opposite of the current state ‘!this.state.isChecked’ for this case.
• Note: Remember when updating the state, to actually set the new state to the opposite value. If it was value: true, then we’ll do value: !true

Controlled React Form CheckBox.

2. Text Input.

• set the initial state in the constructor, as an empty string
• in the input tag, set the value attribute to the current state
• in the input tag add the event listener onChange and add the callback function
• create your callback function, setState and use the event to get the user’s input from the form.

3.- Select Tag

• first set the initial state to an empty string in the constructor method
• in the select tag, set the value attribute to the current state value={this.state.selected}
• in the select tag add the event listener onChange and set it to trigger a callback function
• create a callback function that will update the state with setState, where the key will be the selected: and the value the event.target.value