How to implement two or more functions on Click event in React & ES6

Question

In the case of this code, I have to click the calculate button twice to find answers of BMI and BMI judge. How to code it to click only once find the two answers?

bmiCalc (){ this.setState({bmi:this.state.weight/(this.state.height*this.state.height)*10000}); if(this.state.bmi<18.5){this.setState({judge: 'Underweight'});} else if(this.state.bmi<24.9){this.setState({judge:'Normal weight'});} else if(this.state.bmi<30){this.setState({judge:'Overweight'});} else{this.setState({judge:'Obesity'});} } render(){ return ( <ul><button onClick={this.bmiCalc.bind(this)}>calculate</button></ul> <ul>BMI: {Math.round(this.state.bmi*10)/10}</ul> <ul>BMI judge :{this.state.judge} </ul> ); }

Please put your code in your question. Or use links at least!!! — Bergi
– Bergi, Commented Nov 9, 2015 at 16:18
Your JSX syntax is invalid. render() returns multiple elements, they're not an array, not even separated by commas. Not to mention that React forbids render() from returning multiple root elements. — Rene Saarsoo
– Rene Saarsoo, Commented Nov 9, 2015 at 17:38

Isaac Madwed · Accepted Answer · 2015-11-09 16:15:11Z

You could use something like:

function desiredActions (){ action1() action2() } <button onclick={desiredActions}></button>

Basically just wrap the functions you want to call in a function and assign it to the onclick handler.

Note: this isn't specific to React or ES6, just basic JavaScript.

Wim Mostmans · Accepted Answer · 2015-11-09 16:23:57Z

You can do this by calling the set state once at the end of your function:

bmiCalc() { const bmi = this.state.weight/(this.state.height*this.state.height)*10000; let judge = 'Obesity'; if(this.state.bmi<18.5){this.setState({judge: 'Underweight'});} else if(this.state.bmi<24.9){this.setState({judge:'Normal weight'});} else if(this.state.bmi<30){this.setState({judge:'Overweight'});} this.setState({bmi: bmi, judge: judge}); }

Collectives™ on Stack Overflow

How to implement two or more functions on Click event in React & ES6

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related