How to clear out dynamic input field

Question

I have a form with two radio buttons. Based on your selection your next field will change. There are some calculaltions that occur which I have already figured out. However my one problem is I am unable to clear out the text field if you switch between the radio buttons.

For the radio buttons there is a set state

<label style={{ paddingRight: 50 }}>
              <input
                type="radio"
                name="react-tips"
                value="option1"
                checked={this.state.selectedOption === "option1"}
                onChange={this.handleOptionChange}
                className="form-check-input"
              />
              Transactions
            </label>
            <label style={{}}>
              <input
                type="radio"
                name="react-tips"
                value="option2"
                checked={this.state.selectedOption === "option2"}
                onChange={this.handleOptionChange}
                className="form-check-input"
              />
              Partners
            </label>

As you can see the checked={this.state.selectedOption === "option1"} Is what lets us know which radio button is selected.

From this there is conditional renderin of the text input:

let monthlyField;
if (this.state.selectedOption === "option1") {
  monthlyField = <div>
    <p> $250 per 250 monthly transactions, unlimited trading partners<br />Enter number of transactions per month: </p>
    <input  type="number" placeholder="250" onChange={this.onChangeMonthlyTransactions.bind(this)}/>
  </div>
} else {
  monthlyField = <div>
    <p> $250 per trading partner unlimited transactions <br />Enter number of trading partners: </p>
    <input type="number" placeholder="1" onChange={this.onChangeMonthlyPartners.bind(this)}/>
  </div>
}

Where in the render it will just be

 {monthlyField}

Now using this set state for the radio buttons I can use that to figure out which option has been selected in order to properly calculate

  //Calculating total cost


calculateTotal() {
if (this.state.selectedOption === "option1") {

  console.log("This is transaction based")
  var monthly = (Math.ceil(this.state.typedMonthly /250)) * 250
  var total =  monthly + this.state.fixedAmmount + (this.state.typedMapping * 750)
} else {
  console.log("This is partner based")
  var monthly = (Math.ceil(this.state.typedMonthlyTransaction)) * 250
  var total =  monthly + this.state.fixedAmmount + (this.state.typedMapping * 750)
}

return (
  <p>$ {total}</p> 
)

}

Everything works however, in my text field if I put in a number then switch to the other radio button the same text is still in the text field. I need that to clear out.

An example is in this gif. https://recordit.co/F1WXBgeWB4

The text box does not clear when I switch between radio buttons. The calculation at the bottom works exactly as it should (ie. It resets when changed)

EDIT: On change for radio button code

  handleOptionChange = changeEvent => {
this.setState({
  selectedOption: changeEvent.target.value
});


};

Answer 1

I believe there is a missing double binding between a variable in the states and your input. This can be solved with

if (this.state.selectedOption === "option1") {
  monthlyField = <div>
    <p> $250 per 250 monthly transactions, unlimited trading partners<br />Enter number of transactions per month: </p>
    <input  type="number" value={this.state.inputValue} placeholder="250" onChange={this.onChangeMonthlyTransactions.bind(this)}/>
  </div>
} else {
  monthlyField = <div>
    <p> $250 per trading partner unlimited transactions <br />Enter number of trading partners: </p>
    <input type="number" value={this.state.inputValue} placeholder="1" onChange={this.onChangeMonthlyPartners.bind(this)}/>
  </div>
}

Note the value field added. Also remember to create the variable in the constructor. At this point:

handleOptionChange = changeEvent => {
    this.setState({
      selectedOption: changeEvent.target.value,
      inputValue: ''
    });
};

For more information about that, check out the Forms Documentation