How to create a Controlled Input with React ?

Reminder: before starting coding, just check that React, React.Dom libraries and Babel preprocessor have been installed.

What is a controlled input?

React controlled input definition

Input and Textarea form field elements maintain their own state in the DOM when the user types. Using the React Library we can move this input state into a component state. That way, the input value becomes a part of the application state and is controlled! So, the component state is the single source of truth regarding the input data.

The React controlled input structure

• The component state has an input property initialized with an empty string as the value representing what the user types in the input. Assigning the state to the value attribute permit us to display the typing. If we had assigned an empty string directly in the input attribute, nothing would appear in the field input when typing!
• A method is triggered when the input value changes.
• This method updates the state input property value with the event value received as argument.

In this article, we will display the state input property value to prove that the input is controlled by React!

Create a Controlled Input in a React Class component.

Before creating a Controlled Input in a React Functional component, let’s create it in a class component.

Steps to create a controlled input in a React Class component

1. Install React locally or create a new pen on codepen.
2. Create the HTML element onto render the component. Give it the id “input”.
3. Create a class component which extends React.Component. Name it ControlledInput, for example.
4. Add the internal state in the constructor with this.state.
5. Initialize the state input property at ” (empty string).
6. Create a handler method named handleChange and pass it the event as argument so when the input value is modified by the user the state input value is set with the event.input.target.
7. Do not forget to add the necessary bindings for the created method in the constructor.
8. In the render, create the input.
9. Assign the state input property to its value attribute.
10. Assign onChange handler to trigger the handleChange method when the user types something inside the input field.
11. In the render, add a <h4> element whose text is “Controlled input”.
12. In the render, add a <p> element to display the current state input property value.

A Controlled Input React class component code

The final code of a Controlled Input in a React class component

View the final code of a controlled input in a React class component in a pen

See the Pen
React tricks: Create a controlled input class component by Coding-Tricks (@coding-tricks)
on CodePen.

Create a Controlled Input in a React Functional component with the hook useState

Let’s create this Controlled Input in a React.js functional component has been inspired by the Create a application with React.js published on the OpenClassrooms platform. Then we will create it in a way whose structure is closer to the newly-created one in a class component.

Steps to create a Controlled Input in a React Functional component

1. Install React locally or create a new pen on codepen.
2. Create the HTML element onto render the component. Give it the id “input”.
3. Import the useState hook at the beginning of the file import { useState } from 'react';. Remark: when using codepen the import is not allowed, write const { useState } = React; instead.
4. Create a functional component named ControlledInput.
5. Add the internal state with the useState() hook. Name it input, for example.
6. Initialize the state at ” (empty string).
7. In the return of the component function, add the input.
8. Assign the state as value attribute.
9. Add it the onChange attribute and call the setInput function passing it the e.target.value when the user types comething in the input field.
10. In the render, add a <h4> element whose text is “Controlled input”.
11. In the render, add a <p> element to display the current state.

A Controlled Input React Functional component Code

The final code of a controlled input in a react functional component

View the final code of a Controlled Input in a react functional component in a pen

See the Pen
React tricks: Create a controlled input with the hooks useState and useEffect by Coding-Tricks (@coding-tricks)
on CodePen.

Create a Controlled Input in a React Functional component with a handler function

This second solution using a handler function is closer to the class component structure. The differences are in bold.

Steps to create a Controlled Input in a React Functional component – second possibility

1. Install React locally or create a new pen on codepen.
2. Create the HTML element onto render the component. Give it the id “counter”.
3. Import the useState hook at the beginning of the file import { useState } from 'react';. Remark: when using codepen the import is not allowed, write const { useState } = React; instead.
4. Create a functional component named ControlledInput.
5. Add the internal state with the useState() hook. Name it input, for example.
6. Initialize the state at ” (empty string).
7. Create a handler function named handleChange.
8. Pass it the event as argument.
9. Inside the handler function call the setInput function and pass it the event.target.value as argument.
10. In the return of the component function, add the input.
11. Assign the state as value attribute.
12. Add it the onChange attribute and assign it the handler function .
13. In the render, add a <h4> element whose text is “Controlled input”.
14. In the render, add a <p> element to display the current state.

A Controlled Input React Functional component Code with handler method

The final code of a controlled input in a react functional component with handler method

View the final code of a Controlled Input in a react functional component in a pen

See the Pen
React tricks: Create a controlled input with the hooks useState by Coding-Tricks (@coding-tricks)
on CodePen.

In conclusion

As a result, we can say that it is possible to create a Controlled Input either in a class or a functional React component.

As we can see, every time a new letter is typed the state is updated and the new letter is displayed in both the input and the paragraph. As a matter of fact, the same action is done in a repetitive way… We will learn how to avoid to consume so much memory in another article…

In the next episode, we will learn how to build a controlled form in a class component and… in a functional component!