Learn React 18: Using Controlled Inputs

We have now learned how to use state in React components to update information and subsequently the DOM. You will eventually have to get data from your users and then manipulate the provided information to update the component state and the DOM.

In this lesson from our free full-length beginner course on React 18, you'll learn how.

Take the Course for Free

The primary way to get information from users is through forms. In React, form input elements can either be controlled or uncontrolled.

Controlled inputs are those form elements whose value is controlled by the React component state. They are the preferred way of handling form input with React. In this tutorial, we will learn the basics of controlled inputs in React by adding an input field to our random number generator from the previous tutorial.

Adding a Controlled Input

Here is the complete code for our RandomGenerator component for reference.

class RandomGenerator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      randomNumber: Math.floor(Math.random() * 1000) + props.low
    };
  }

  componentDidMount() {
    this.numTimer = setInterval(() => {
      let tempVal = Math.floor(Math.random() * 1000) + this.props.low;
      this.setState({ randomNumber: tempVal });
    }, 2000);
  }

  componentWillUnmount() {
    clearInterval(this.numTimer);
  }

  render() {
    return (
      <div class="container">
        <h1>Random Number Generator</h1>
        <h2>{this.state.randomNumber}</h2>
      </div>
    );
  }
}

Let's get started by updating the constructor method. We will add a new value to the state property to handle any changes in the range of input numbers. The initial value of numberRange comes from the value of our prop numRange. We also use the constructor to bind the handleRangeChange method to our class.

constructor(props) {
    super(props);

    this.state = {
      numberRange: props.numRange,
      randomNumber: Math.floor(Math.random() * props.numRange) + props.low
    };
    
    this.handleRangeChange = this.handleRangeChange.bind(this);
}

Now, we will update the code inside the render() method to include a form input. We will also update the component code to accept an additional prop for users to pass a range for generating the random numbers.

The updated render() method for the component will look like this:

render() {
    return (
      <div class="container">
        <h1>Random Number Generator</h1>
        <div className="range-container">
        <p>Lower Limit: {this.props.low}</p>
        <p>Upper Limit: {this.props.low + this.state.numberRange}</p>
        </div>
        <h2>{this.state.randomNumber}</h2>
        <form>
          <input type="number" className="number-range" value={this.state.numberRange} onChange={this.handleRangeChange}/>
        </form>
      </div>
    );
}

As you can see, the value of our input element is set to this.state.numberRange, and we are using the onChange event to provide a function that will handle any changes in the element value. Since we are controlling the value of the input element, it is a controlled component. All the form data is being stored in the component's state.

Now we will add another method called handleRangeChange() to our component class. Here is its code:

handleRangeChange(e) {
    let newRange = parseInt(e.target.value);
    
    if(isNaN(newRange) || newRange < 0) {
      newRange = 0;
    }
    
    this.setState({numberRange: newRange});
}

We get the value of the input field and make sure that it is a valid number greater than or equal to zero. Finally, we update the state to set the value of numberRange to our new input value.

The componentDidMount() method will also change to get new values based on the provided number range instead of a hard-coded limit.

componentDidMount() {
    this.numTimer = setInterval(() => {
      let tempVal = Math.floor(Math.random() * this.state.numberRange) + this.props.low;
      this.setState({ randomNumber: tempVal });
    }, 2000);
}

You can now render your new component on screen by using the code below:

let randomElem = (
  <>
    <RandomGenerator low={500} numRange={1000} />
  </>
);

ReactDOM.createRoot(rootElem).render(randomElem);

Here is the CodePen demo that shows our updated RandomGenerator component with controlled input.

Try to add another input element to the component where users can also pass a lower limit for the generation of random numbers.

Final Thoughts

When using controlled inputs, you are in charge of everything from providing a value for the input field to updating it later so that everything is handled within React. This is considered the proper way of handling form input data in React.

In the next tutorial, we will update our original random number generator to use uncontrolled input.