Controlled Forms in React

Controlled forms are a pretty common thing in React, and I’ve definitely gotten used to using them in the past few weeks. In this blogpost I’ll be going through the steps to create a controlled form.

To start out with, we need a react app. This can be achieved by typing

‘npx create-react-app’ (or just ‘create-react-app’ if you globally installed react)

create-react-app name-of-app-here

• sidenote - the name of your react app must be lowercase

Once your app is created, remove all the unnecessary boilerplate.

In your-project-directory/src, delete everything except for Index.js and App.js

In App.js, remove the imports for ‘./logo.svg’ and ‘./App.css’, as well as everything between the div tags in the return.

In Index.js, remove the imports from ‘./index.css’ and ‘./serviceWorker’, and ‘serviceWorker.unregister() from the bottom of the file.

After doing this, your App.js:

import React from 'react';
function App() {
    return (
        <div className="App">
        </div>
    );
}
export default App;

And Index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'));

Awesome! Now we can get started. In /src create a folder called components.

Inside of /src/components let’s make a file called ‘ControlledForm.js’ This component will need to be stateful. A controlled form means that rather than the value of the input being set by the user, the value of the input is taken from state. To change the value of the input, we have to update state.

This component will need a form, and state values for each input within the form. For this example, we’re just going to have one input field:

import React, { Component } from 'react' 
export default class ControlledForm extends Component {     
   state = {        
      input: ''    
   }     
   render(){        
       return (            
           <div>                
              <form>                    
                 <input name='input' 
                        value={this.state.input}
              />                
              </form>            
           </div>        
       )    
   }
}

Awesome! Now we have our basic component. If we imported this into App.js and tried to type into the field right now, it wouldn’t update. This is because although we’re typing into the field, we haven’t told our input that state needs to be updated. To achieve this, let’s add an onChange to our input field.

<input name='input' 
       value={this.state.input}
       onChange={this.handleChange}
/>

Now when we type into the input field, it will call on a function ‘handleChange’, and implicitly pass in the event.

Let’s create the handleChange function just below state.

handleChange = (event) => {
    this.setState({[event.target.name]: event.target.value})
}

By using this abstraction, if we wanted to add more inputs to our form, we could easily do so and pass it the same function. This makes for clean, reusable code. Nice!

Now in App.js, let’s bring in and use ControlledForm:

import React from 'react';
import ControlledForm from './components/ControlledForm'
function App() {
    return (
        <div className="App">
            <ControlledForm />
        </div>
    );
}
export default App;

Now if we launch our website using ‘npm start’, we should be able to successfully type into our input.

Sweet! Hopefully this helped someone to set up a controlled form!