You provided ‘value’ prop to a form field without onChange handler – How to fix this warning?

You provided ‘value’ prop to a form field without onChange handler

Resolving warning: “You provided ‘value’ prop to a form field without onChange handler” in React will be helpful for you when you make a form. Using onChange attribute or removing value attribute are usually the commonly used solutions. So how to do it? Let’s go into detail.

The reason for the warning: “You provided ‘value’ prop to a form field without onChange handler”

This warning happened because you made a static value for your form. Let’s see the example below:

import { useState } from 'react';

function App() {
    const [value, setValue] = useState('Hello From Learn Share IT');
  
    return (
        <div className="App">
            <form>
              	<h1></h1>
              	<input type={'text'} value={value}></input>
            </form>
        </div>
    );
}

export default App;

The warning:

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable, use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    at input
    at form
    at div

Here I get a warning because I set the value attribue to the value state without an onChange handler, and the value state is a static value. It means that the value in my input cannot change when the user interacts with UI. So React will recommend we use onChange. Below are some solutions for this warning.

Solutions for this warning

Use onChange attribute

The obvious solution for this error is using the onChange attribute for our input element. Then, every time input gets some new value. It can get logic to change the input value.

Example:

import { useState } from 'react';

function App() {
    const [value, setValue] = useState('Hello From Learn Share IT');
    const handleValue = (e) => {
      	setValue(e.target.value);
    };

    return (
        <div className="App">
            <form>
              	<input type={'text'} value={value} onChange={handleValue}></input>
            </form>
        </div>
    );
}

export default App;

Output:

Animated GIF - Find & Share on GIPHY
Learn Share IT

Here I make an onChange and pass in the handleValue function that sets the value to the value state every time the user changes the input value.

Remove value attribute

If you don’t want use the onChange attribute and want to show the user some text, you can use it this way.

Use placeholder

import { useState } from 'react';

function App() {
    const [value, setValue] = useState('Type your name');

    return (
        <div className="App">
            <form>
              	<h1></h1>
              	<input type={'text'} placeholder={value}></input>
            </form>
        </div>
    );
}

export default App;

Output:

Animated GIF - Find & Share on GIPHY

Here I make a placeholder attribute to remind the user what this input is used for.

Use defaultValue

The input element also provided defaultValue attribute to set a value as default for input.

Example:

import { useState } from 'react';

function App() {
    const [value, setValue] = useState('Type your name');

    return (
        <div className="App">
            <form>
              	<h1></h1>
              	<input type={'text'} defaultValue={value}></input>
            </form>
        </div>
    );
}

export default App;

Output:

Animated GIF - Find & Share on GIPHY

Ignore the warning

You can ignore the warning if you know your purpose and what you are doing.

Summary:

In this article, I’ve shown you how to solve the warning: “You provided ‘value’ prop to a form field without onChange handler”. You can add an onChange attribute, use defaultValue or placeholder attribute to follow your purpose. Or you can ignore it. Let’s try these methods!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *