1

I'm new to React, sorry if my questions are trivial.

In React, if I write:

<input value="" />

then it will be an read-only field, and React forces me to add an onChange handler as:

<input value={this.state.greeting} onChange={this.handleChange} />

where handleChange() update component's state.greeting, therefore value gets updated too

Below are my questions:

Q1-why <input value="" /> is not read-only in plain html but read-only in React? How does React make it read-only

Q2-I found that if I write the code as below it also works, the input is not read-only

<input onChange={this.handleChange} />

and isn't that this approach better and more concise? because the internal value will get updated automatically in the browser, therefore we don't need to include an value attribute to read the data back from the state, which is unnecessary in most of times, so why I always see code like:

<input value={this.state.greeting} onChange={this.handleChange} />

Additional info:

some says it is controlled form elements that needs to have value attribute, but why we need to have a value attribute to read from the state? and when we type sth into the input, the onChange handler already updates the state, so it is still controlled.

Improve this question
4
  • 2
    sounds like you need to read this: reactjs.org/docs/forms.html#controlled-components, and this: reactjs.org/docs/uncontrolled-components.html Commented Nov 6, 2019 at 11:25
  • Welcome to world of React. Not just input element, most of the regular elements of HTML needs a binding to a state, that what makes it reactive Read more here: reactjs.org/docs/forms.html Commented Nov 6, 2019 at 11:26
  • assume you need to have the validations on input field, instead of having basic html validations you need a custom one thats one of the usecase. Commented Nov 6, 2019 at 11:27
  • @DavinTryon I actually know controlled/uncontrolled components. For controlled form elements, why we need to have a value attribute to read from the state? when we type sth into the input, the onChange handler already updates the state? Commented Nov 6, 2019 at 11:51

1 Answer 1

Reset to default
0

To know how React makes your tags readonly, you will need to study the source-code that runs at your end and/or view the generated HTML. If still unsure about it, then you might want to send your first question to the authors of the tool.

The state is not on the server, unless you are polling or doing something of the like. It's in your browser as well. The value property specifies the initial value of your HTML element, that is, before you do anything your tag will have a value. In your case, your tag is controlled by React, but you need to initialize it. Benefits:

  • you will have the initial value
  • you will have a more readable code
  • your code will be written in the React-way, so you will not need to worry of unpleasant surprises
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

thanks for your answer. So for my Q2, why we need to have a value attribute?
@amjad you have conducted an experiment and have experienced the result that it works without the value attribute as well, so, if your test was full, then there is no need for the attribute's existence. However, I have given three benefits for it: 1. The tag will have an initial value, it will not only be updated by the change event 2. Your code will be more readable, if someone else or your later self reads that tag it will be evident what is bound to that tag 3. We do not know the underlying logic of React, it's safer to follow their recommendations.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.