How do I create a controlled form?

In most applications, we need to accept user input and this is usually achieved with the HTML form and its collection of input controls. And this article will help you to find an answer to the question — “So how do I create a controlled form?”

Controlled input form represents React Components with Input fields a user can type into. The user’s input becomes part of the application state, so React controls the value of that input field. The whole idea is about creating a controlled input where the text is being updated from our state (not from the browser).

Step1 (Setting the state)

First, we are setting a state — the component’s state is initialized with an input property that holds an empty string. “input”’s value represents the text a user types into the input field.

class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ‘'
submit: ‘’
};
this.handleChange =this.handleChange.bind(this);
this.handleSubmit =this.handleSubmit.bind(this)

Step2 (handleChange and handleSubmit)

Second, we create a handleChange() method with a parameter called ‘event’. Every time when the method is triggered, it receives an event object that contains a string of text from the input element. We can access this string with event.target.value inside the method. Update the input property of the component’s state with this new string.

handleChange(event) {
this.setState({
input: event.target.value
});
}

Then we create the handleSubmit method for our component. It will be called when the form is submitted.

Two things this method does -

1. Because your form is submitting you will have to prevent the page from refreshing.
2. Second, it calls the setState() method, passing in an object of the different key-value pairs that you want to change. In this case, you want to set ‘submit’ to the value of the variable ‘input’ and set ‘input’ to an empty string.

handleSubmit(event) {
event.preventDefault()
this.setState({
submit: this.state.input
});

Step3 (render area)

Step 3 will involve several substeps. First of all, we create an input box (in render area) and trigger it when someone types anything. For this purpose, we have an event called onChange(). So we create the input element and add a value attribute that is equal to the input property of the component’s state — {this.state.input}. Then we add an onChange() event handler set to the handleChange() method — onChange={this.handleChange}.

A button is added which submits the form. It has the type set to submit indicating it is the button controlling the form. So the current component state property submit to the current input value in the local state — onSubmit={this.handleSubmit}

render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
value={this.state.input}
onChange={this.handleChange} />
<button type='submit'>Submit!</button>
</form>
<h1>{this.state.submit}</h1>
</div>
);
}
}; <input value = {this.state.input} onChange = {this.handleChange.bind(this)}/>

Here is a final code:

class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
submit: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
handleSubmit(event) {
event.preventDefault()
this.setState({
submit: this.state.input
});
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
value={this.state.input}
onChange={this.handleChange} />
<button type='submit'>Submit!</button>
</form>
</div>
);
}
};