Uncontrolled Components in ReactJS

Uncontrolled component means the value of the component is controlled by DOM.

Official document of ReactJS recommends controlled components. But there are times when you need to use uncontrolled components.
e.g. When you are converting a non-react application to react application, then it is a little annoying to write an event handler for every way your data change and set data to state object of component. Then the uncontrolled component comes handy.

To write an uncontrolled component, you need to use ref to get the value from component. ref.current will give you the uncontrolled component.

Uncontrolled input tag

Have a look at an example.


class App extends React.Component{
    constructor(props){
      super(props);
      this.inputRef = React.createRef();
      this.onFormSubmit = this.onFormSubmit.bind(this);
    }
    onFormSubmit(e){
      e.preventDefault();
      alert(this.inputRef.current.value);
    }
    render(){
        return (
          <form onSubmit={this.onFormSubmit}>
            <input type="text" ref={this.inputRef} />
            <input type="submit" value="submit" /> 
          </form>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

Open above code in codepen.

In above code, we have create a inputRef in a constructor(). We have assigned this.inputRef to a input tag. When we submit the Form, you can get the value of input box using this.inputRef.current.value.

Default value of uncontrolled components

In uncontrolled component, if you need to provide default value, use defaultValue attribute instead of value ( which is used in controlled component).


render(){
    return (
      <form onSubmit={this.onFormSubmit}>
        <input type="text" ref={this.inputRef} defaultValue="FirstName"/>
        <input type="submit" value="submit" /> 
      </form>
    );
}
                    

Also, checkbox, radio button, selectbox and textarea supports defaultValue.

The file input tag in ReactJS

The value of file input can only be set by user and not programmatically. So in ReactJS, file input is always uncontrolled component.

Let us have a look at an example.


class App extends React.Component{
    constructor(props){
      super(props);
      this.inputFileRef = React.createRef();
      this.onFormSubmit = this.onFormSubmit.bind(this);
    }
    onFormSubmit(e){
      e.preventDefault();
      console.log(this.inputFileRef.current.files);
      alert(this.inputFileRef.current.files[0].name);
    }
    render(){;
        return (
          <form onSubmit={this.onFormSubmit}>
            <input type="file" ref={this.inputFileRef} />
            <input type="submit" value="submit" /> 
          </form>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
                    

Open above code in codepen.

As you can see from above code, you can access the uploaded file objects using this.inputFileRef.current.

Conclusion

In this section, you learned about Uncontrolled components in ReactJS.
In the next section, you will learn about the difference between the controlled component and the uncontrolled component in ReactJS.