how to set default value to numeric input field in reactjs?

Question

I am working on a sample reactjs form, which has a input number field as shown below:

<input type="number" name="quantity" 
  min="1" 
  step="1"
  value={this.state.userCount}
  onChange={this.handleUserCountChange}
/>

How to set the default value to 5 for the numeric field?

Sabrican Ozan · Accepted Answer · 2016-10-23 09:45:55Z

1

answered Oct 23, 2016 at 9:45

Sabrican Ozan

7383 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shuja Shabandri · Accepted Answer · 2016-10-23 09:45:34Z

1

in your constructor you can set the state.

constructor(props) {
  super(props);
  this.state = {
    userCount: 5
  };
}

answered Oct 23, 2016 at 9:45

Shuja Shabandri

5574 silver badges12 bronze badges

Pineda · Accepted Answer · 2016-10-23 10:39:13Z

0

You have set the value of that numeric input to the component state:

this.state.userCount

When this form is initially rendered, it will populate the input with the value stored in this.state.userCount.

Like other posters have mentioned, you just have to set the the initial state:

React createClass syntax:

var TestForm = React.createClass({
  getInitialState() {
    return {
      userCount: 5
    };
  },
});

ES6/ES2015 class syntax:

class TestForm extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
    userCount: 5
   };
 }
}

answered Oct 23, 2016 at 10:39

Pineda

7,5933 gold badges34 silver badges47 bronze badges