Value attribute in react

JavaScript
1

Tell us what’s happening:

  **Your code so far**


class MyForm extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
    submit: ''
  };
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
  this.setState({
    input: event.target.value
  });
}
handleSubmit(event) {
  // Change code below this line
  this.setState(state=>({submit:state.input}))
  event.preventDefault()
  // Change code above this line
}
render() {
  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        {/* Change code below this line */}
        <input value={this.state.input} onChange={this.handleChange}/>
        {/* Change code above this line */}
        <button type='submit'>Submit!</button>
      </form>
      {/* Change code below this line */}
      <h1>{this.state.submit}</h1>
      {/* Change code above this line */}
    </div>
  );
}
}

code is working fine without this line :-  value={this.state.input}
then why we should add it
2

code is working fine without this line :- value={this.state.input}
then why we should add it

3

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue

HTML <input> elements have a value attribute, as in, what is typed into the input. So the value of the input is whatever state.input is, and when the user types into the input, the function attached to the input’s “change” event updates state.input (which then adjusts the value and so on)

4

i think this is so your page code handles the data, otherwise its only your browser that does it. You want your code to handle the data so you are able to better modify and control it and not rely on browser built in functions. It might be confusing at this stage for you and it certainly was for me, but in the long run know this is the right way to handle it and you should stick to it.

5

What you said is work’s also without

value={this.state.input}

and in your suggested link I studied about value attribute , and in that page also same thing is mention that :-

The value attribute is always optional, though should be considered mandatory for checkbox , radio , and hidden .

But yeah I understood that it’s good practice to add value attribute and nothing important.
Is I am right ?

6

I think you are right, thanks for help .

7

If you search for react controlled input you will get some more information.

1 Like
8

React needs to control what the value of it is. So you need to be able to set what the value is, and provide a way to update it via a function.

So you attach the value to the state, then update the state via onChange (or a similar event handler). This is a controlled component

You can leave it off, but then you need a way for React to access the HTML it generates so it can read the value from it: this is an uncontrolled component, and it’s not as simple to work with most of the time

1 Like
9

Thanks for all I got it.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.