How can I pass a variable in a form to to a onclick function in React.js?

Question

What I am trying to achieve is to have an input box's value set once a percentage is selected. But to calculate that value I need the value of the purchasePrice. I've tried accessing the purchasePrice property in the function of onDownPaymentPercentChange but that didn't work. How I do accomplish this?

export default class PurchaseInfo extends Component{
constructor(props){
    super(props);
    this.state ={
        purchasePrice:'',
        downPayment:'',
    }
}

onPurchasePriceChange = (e) => {
        this.setState({
            purchasePrice: e.target.value
        })
    }

onDownPaymentPercentChange = (e) => {
        console.log(e.target.value)
        this.setState({
            downPayment: e.target.value * this.purchasePrice
        })
    }
render(){
  return(
  <div>
     <label>Purchase Price</label>
     <br/>
     <input id='PurchasePrice' required placeholder='$' onChange={this.onPurchasePriceChange}></input>
     <br/>
      <br/>
     <label>Percentage of purchase price</label>      
     <br/>
     <select onChange={this.onDownPaymentPercentChange}>
                    <option value='.035'>3.5%</option>
                    <option value='.05'>.5%</option>
     </select>
     <br/>
     <br>
    <label> Down Payment <label />
      <br/>
     <input required placeholder='$' value={this.state.downPayment}> 
     </input>
 </div>

Brian Thompson · Accepted Answer · 2020-01-13 20:21:11Z

2

You are trying to access a class property called purchasePrice instead of a state value.

onDownPaymentPercentChange = (e) => {
  this.setState({
    downPayment: e.target.value * this.purchasePrice // Problem is here
  })
}

Access purchasePrice through the state object like this: this.state.purchasePrice.

edited Jan 13, 2020 at 20:21

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

answered Jan 13, 2020 at 17:29

HS NANDEESH GOWDA

1314 bronze badges

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

Comments

Eric · Accepted Answer · 2020-01-13 18:07:22Z

0

You a not accessing correctly your state. Also, check the purchasedPrice state beforehand

onDownPaymentPercentChange = (e) => {
   console.log(e.target.value);
   if(this.state.purchasePrice === ''){
      return;
   }
   this.setState({
        downPayment: e.target.value * this.state.purchasePrice
   });
}

edited Jan 13, 2020 at 18:07

answered Jan 13, 2020 at 17:41

Eric

113 bronze badges

2 Comments

Brian Thompson Over a year ago

You don't need to bind arrow functions.

itsOnly1_Jah Over a year ago

It's always something simple. Thanks!

Collectives™ on Stack Overflow

How can I pass a variable in a form to to a onclick function in React.js?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related