Trying to understand React docs section on Controlled Input Null Value

JavaScript
1

This question is a little too vague to ask on Stack Overflow, so I’m hoping someone here would be willing to help me out. :sweat_smile:

On the React docs page on Forms, it states the following. What are they saying exactly (that you shouldn’t ever set value to undefined or null)? What do they mean by “unless you desire to do so”? I don’t get what they’re trying to say with the example. :question::question::question:
Also I’m assuming mountNode is just being used a placeholder for the container you want to render the input element into.

Controlled Input Null Value
Specifying the value prop on a controlled component prevents the user from changing the input unless you desire so. If you’ve specified a value but the input is still editable, you may have accidentally set value to undefined or null.

The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)

ReactDOM.render(<input value="hi" />, mountNode);

setTimeout(function() {
  ReactDOM.render(<input value={null} />, mountNode);
}, 1000);
2

What they’re saying is, when you set an explicit value to the input, it is locked from user input. They cannot change it. Done deal. Boom-thud.

You can, however, change the value to null or undefined at some point, which will then cause the input to become editable. So “unless you desire so” means “when you WANT the user to be able to change the input, then set its value to either undefined or null EXPLICITLY.”

3 Likes
3

ReactDOM.render(<input value=“hi” />, mountNode); setTimeout(function() {

ReactDOM.render(<input value={null} />, mountNode); }, 1000);

I am a intermediate level in react. I am confused why this code?

why do you want to assign value there? you can set state and get value from user don’t you?

i think this code( ReactDOM.render(<input value=“hi” />, mountNode):wink:
wont work. becuse you have to select the id from index.html from your public folder of your react app.

this code (ReactDOM.render(<input value=“hi”/>, document.getElementById(‘root’));
) will work. becuse i have selected the id in order to run javasript

even if this code run, why this code

4

I think they’re just saying it’s possible. mountNode is used in examples as a placeholder for document.getElementById('example'), wherever you want to render the component (see this Stack Overflow answer)

5

are you taking about the id? ya id you can give root or anything you want to give. but you should select that id from index.html from html.
if you mention here anything other than this id, please let me know
.