DEV Community

Cover image for Handling react input forms (and their states)
Muhammad Yusuf
Muhammad Yusuf

Posted on • Edited on

Handling react input forms (and their states)

Overview & text input

In react, form input is usually handled by the components while in HTML is handled by the DOM.

Basically a HTML form can be as simple as this:

<form>
  <p>Name:</p>
  <input type="text"/>
</form>
Enter fullscreen mode Exit fullscreen mode

By default, this form will bring you to a new page. But most of the time there will be a script to handle the form submission and has access to the submitted value.

Now let's say we want to show what's being submitted by the user by showing what they're typing. We can do that by converting the form into a new component first

class App extends React.component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <form>
        <p>Name</p>
        <input type="text"/>
      </form>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

Then we need to define its state and add the onChange handler so we can get the name value and show it later on.

class App extends React.component {
  constructor(props) {
    super(props)
    this.state = { name: '' }
  }
  render() {
    return (
      <form>
        <p>Name:</p>
        <input type="text"
          onChange={(e) => this.setState({ name: e.target.value }) }/>
      </form>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

Now we can see the current state by putting it in the render method. And finally, we can put the current state value to the input so the input won't be empty on the first load.

<form>
  { JSON.stringify(this.state) }
  <p>Name</p>
  <input type="text"
    value={ this.state.name }
    onChange={(e) => this.setState({ name: e.target.value })} 
  />
</form>
Enter fullscreen mode Exit fullscreen mode

Now it should look like this
React simple form - GIF

Other input types (number, radio, select-option, checkbox)

For other input types, we need to add more variables for each respective input.

this.state = {
  name: '',
  age: 10, // for number
  gender: 'none', // for radio
  occupation: 'none', // for select-option
  isCool: false // for checkbox
}
Enter fullscreen mode Exit fullscreen mode

For number input, it's similar to the text input, we can add it below the name input

<p>Age:</p>
<input type="number" value={ this.state.age }
  onChange= { e => { this.setState({ age: Number(e.target.value) })}}
  ></input>
Enter fullscreen mode Exit fullscreen mode

Now with radio input, it needs an additional attribute called checked, it determines if the radio button is selected (checked) or not by accepting a boolean or true/false value.

<p>Gender:</p>
<input type="radio" name="gender" value="male"
  checked={ this.state.gender === 'male' }
  onChange={ e => { this.setState({ gender: 'male' }) }}
  />
<label>Male</label>
Enter fullscreen mode Exit fullscreen mode

If you want multiple radio buttons which most of the time happens, you can duplicate the input tag with another different value in value, checked, and onChange attributes.

<p>Gender:</p>
<input type="radio" name="gender" value="male"
  checked={ this.state.gender === 'male' }
  onChange={ e => { this.setState({ gender: 'male' }) }}
  />
<label>Male</label>
<input type="radio" name="gender" value="female"
  checked={ this.state.gender === 'female' }
  onChange={ e => { this.setState({ gender: 'female' }) }}
  />
<label>Female</label>
Enter fullscreen mode Exit fullscreen mode

For select-option, each option will have its value as usual, but if you want a value to be initially selected you can put value attribute to the root select tag along with onChange attribute.

<p>Occupation:</p>
<select name="occupation" value={ this.state.occupation } onChange={ e => this.setState({ occupation: e.target.value })}>
  <option value="">-- SELECT --</option>
  <option value="Frontend">Frontend</option>
  <option value="Backend">Backend</option>
  <option value="Full Stack">Full Stack</option>
</select>
Enter fullscreen mode Exit fullscreen mode

And finally, for checkbox input, you can add checked and onChange attributes.

<p>Are you cool?</p>
<input type="checkbox" checked={ this.state.isCool } onChange={ e => this.setState({ isCool: e.target.checked })}/>
<label>Of course I'm cool!</label>
Enter fullscreen mode Exit fullscreen mode

Now you can access all the input in your script and it should look like this

React Input

For further reading, you can go to:
https://reactjs.org/docs/forms.html

Top comments (0)