Reactjs Fix Failed form propType: You provided a `value` prop to a form field an `onChange` handler


If you learning react and working on applications, we used to get following errors

Initially, I got the following errors while learning react framework

This blog post talks about solution for Failed form propType errors in input controls

  • Failed form propType: You provided a value prop to a form field without an onChange handler
  • Failed form propType: You provided a checked prop to a form field without an onChange handler

This error comes in the following cases.

input form is declared with initializing value attribute without onchange Handler

Like html form handling, React also supports form input control handling with two approaches

Fix for form propType: You provided a value prop to a form field an onChange handler

Let’s see how this error comes with react component

Created a simple react component with input type=text”

import React, { Component } from 'react';

class TestComponent extends Component {
    render() {
        return (
            <div>
                <input type="text" value="Test value" ></input>
            </div>
        );
    }
}

export default TestComponent;

And you will see the error on the console

React error Fix Failed form propType: You provided a `value` prop to a form field  an `onChange` handler

Another way, Created another component with input type=checkbox , able to reproduce the issue.

                <input type="checkbox" checked="true" ></input>

you got below error in console

**Warning: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly **

You are setting input values initially using value attribute, So you can use placeholder for it.

Solution for You provided a checked prop to a form field without an onChange handler

UI form has own start and react has separate state object which holds form data.

In React, Form handling is done using below approaches

Handling state by React

Controlled Component In this, form input is controlled by by React component itself using state object with useState method

This error thrown in the console in below cases Missing required attributes and directive in Controlled and uncontrolled components

Then, What are required things for controlled components?

Value for input elements and checked for radio and checkbox attribute is to update by React component from state object object while user typing or selecting the input control.

ok, How and who do you update state?

State object in react is updated using setState() method, and onChange directive is fired while keystroke is entered in input, so you will update state in onChange event handler

In the below form handling is done by React component, User entered data on input form, onChange event fired and handler is executed, get the value and update the state using setState object

import React, { Component } from 'react';

class TestComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ""
        }

    }
    onChangeEvent = (event) => {
        const newName = event.target.value;
        this.setState({
            name: newName
        })
    }
    render() {
        const { name } = this.state;

        return (
            <div>
                <input
                    type="text"
                    placeholder="Enter Name..."
                    value={name}
                    onChange={(event) => this.onChangeEvent(event)} />
                <div>{name}</div>

            </div>
        );
    }
}

export default TestComponent;

The same way for checkboxes, We will use onChange event handler to update the state which bound to checked value.

Form handling with DOM

In this, input form date is handled by Inbuilt DOM itself. This is called Uncontrolled Components

So errors, when you don’t specify the following attributes

defaultValue for input text controls defaultChecked for radio and checkbox

These attributes are used for configuring default values while showing form to user. Then, How DOM update the data?

Here DOM handles the data, refs in react are used to retrieve the values from DOM.

Here is complete code and explanation

  • Defined input bounded to submit handler which is bounded in constructor
  • Added ref to input element which initialized React.createRef() in constructor
  • Input form is initialized with defaultValue for input type=text/textarea/select
  • For checkbox and radio types, use defaultChecked
  • In the submit event handler, input values is retrieved using this.input.current.value
import React, { Component } from 'react';

class TestComponent extends Component {
    constructor(props) {
        super(props);
        this.onSubmitEvent = this.onSubmitEvent.bind(this);
        this.input = React.createRef();
    }
    onSubmitEvent = (event) => {
        event.preventDefault();
        console.log(this.input.current.value)
    }
    render() {

        return (
            <form onSubmit={this.onSubmitEvent}>
                <label>
                    Name:
              <input
                        defaultValue="Franc"
                        type="text"
                        ref={this.input} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

export default TestComponent;

Conclusion

on this tutorial, we will learned how to fix Fix for form propType error in react with controlled and uncontrolled components with example.

THE BEST NEWSLETTER ANYWHERE
Join 90,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts