Why is value set in input value is of type string only?

Question

Here I want to set state the value in setstate as integer in the in my reactjs component. I am unable to do so since the value is not set as integer so in radio button its does not comes as checked.

constructor(props) {
  super(props);
  this.state = {
   frequency: 1,
}
handleSelectChange(event) {

  this.setState({
    frequency: event.target.value
  })
};


<div className = "custom-control custom-radio custom-control-inline"
onChange = {
    this.handleSelectChange.bind(this)
  } >
  <
  input type = "radio"
id = "oneTime"
value = "0"
name = "type"
onChange = {
  event => this.handleSelectChange(event)
}

checked = {
  this.state.frequency === "0"
}
className = "custom-control-input" / >
  <
  label className = "custom-control-label"
htmlFor = "oneTime" > {
    Labels.PRODUCT_SUBSCRIPTION.ONETIME
  } <
  /label> < /
div > <
  div className = "custom-control custom-radio custom-control-inline" >
  <
  input type = "radio"
id = "continuous"
value = "1"
name = "type"
checked = {
  this.state.frequency === "1"
}
onChange = {
  event => this.handleSelectChange(event)
}
className = "custom-control-input" / >
  <
  label className = "custom-control-label"
htmlFor = "continuous" > {
    Labels.PRODUCT_SUBSCRIPTION.CONTINUOUS
  } 
  </label>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I know we can set this by using defaultValue. But then it becomes uncontrolled which is not encouraged.

Umair Abid · Accepted Answer · 2019-03-20 07:13:57Z

3

Instead of setting value as string like

<input type="radio" value="1" />

Set it as integer

<input type="radio" value={1} />

Also try to use === while comparing if you want some value of your state to be strictly number, otherwise your comparisons won't be very strict

Edit

To make the radio button checked you can then set the checked attr of radio by comparing it to the value of state

<input type="radio" checked={this.state.frequency === 1} value={1} />

edited Mar 20, 2019 at 7:13

answered Mar 20, 2019 at 6:59

Umair Abid

1,4632 gold badges19 silver badges36 bronze badges

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

2 Comments

moved Over a year ago

I tried that earlier but radio button does not get checked when I click on it.

Umair Abid Over a year ago

it won't be checked based on value but on checked property, let me edit my answer

Bhojendra Rauniyar · Accepted Answer · 2019-03-20 07:19:21Z

0

You should initialize the value like:

<input type="radio"
 checked={this.state.frequency === 1}
 value={this.state.frequency || 0} />

You already noticed from another answer that value="0" will represent the string 0 while value={0} will represent the integer 0.

answered Mar 20, 2019 at 7:19

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Collectives™ on Stack Overflow

Why is value set in input value is of type string only?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related