Disabling multiple radio buttons at once

Question

In this component I have a radio button and a text box in a row. When the radio button is selected the input field in that row is enabled. When the radio button is not selected the input field in that row is disabled. How would I do this using react?

 <div className="row">
      <input value="one" name="stars" type="radio" />
       <input type="number" className="number-input"/>
   </div>
<div className="row">
      <input value="one" name="stars" type="radio" />
       <input type="number" className="number-input"/>
    </div>
    <div className="row">
      <input value="one" name="stars" type="radio" />
       <input type="number" className="number-input"/>
    </div>

Answer 1

One approach might be to track the value using state:

  <div className="row">
      <input value="one" name="stars" type="radio" checked={this.state.oneChecked} onChange={e=>this.setState({oneChecked: e.target.checked})}/>
      <input type="number" className="number-input" disabled={!this.state.oneChecked} />
  </div>
  <div className="row">
      <input value="two" name="stars" type="radio" checked={this.state.twoChecked} onChange={e=>this.setState({twoChecked: e.target.checked})}/>
      <input type="number" className="number-input" disabled={!this.state.twoChecked} />
  </div>
  <div className="row">
      <input value="three" name="stars" type="radio" checked={this.state.threeChecked} onChange={e=>this.setState({threeChecked: e.target.checked})}/>
      <input type="number" className="number-input" disabled={!this.state.threeChecked} />
  </div>