Why does my calculate function not working?

Question

I am working on a simple tip calculator using React

I am almost finished but the "calculate function" is not working.

I have 4 states in my component which are

this.state = {
  bill: 0,
  value: 0.3, {/* this is a select tag */}
  people: 0,
  total : 0,
};

My formula inside the calculate function is

    calculate(e){
       e.preventDefault();

       this.setState({
        total: (this.state.bill * this.state.value ) / this.state.people
      });
    }

This should update my {this.state.total} but whenever I click the button, it's not working as intended. I tried checking the developer tools in chrome but I can't find any problem.

 class Container extends React.Component { constructor(props){ super(props) this.state = { bill: 0, value: 0.3, people: 0, total : 0, }; this.handleChange = this.handleChange.bind(this); this.handleService = this.handleService.bind(this); this.handlePeople = this.handlePeople.bind(this); this.calculate = this.calculate.bind(this); } handleChange(event) { this.setState({bill: event.target.value}); } handleService(event) { this.setState({value: event.target.value}); } handlePeople(e){ this.setState({ people : e.target.value }) } calculate(e){ e.preventDefault(); this.setState({ total: (this.state.bill * this.state.value ) / this.state.people }) } render() { return ( <div className="container"> <h2> Tip Calculator</h2> <form onSubmit={this.calculate}> <Bill bill={this.handleChange}/> <Service value={this.state.value} service={this.handleService}/> <People people={this.handlePeople} /> </form> <button> CALCULATE! </button> <p>{this.state.total}</p> </div> ); } } class Bill extends React.Component { render() { return ( <div> <p>How much was your bill? </p> <span>$ </span><input placeholder="Bill Amount" onChange={this.props.bill}/> </div> ); } } class Service extends React.Component { render() { return ( <div> <p> How was your service? </p> <select value={this.props.value} onChange={this.props.service}> <option value="0.3">30% - Outstanding </option> <option value="0.2">20% - Good </option> <option value=".15">15% - It was OK</option> <option value=".1">10% - Bad </option> <option value=".05">5% Terrible </option> </select> </div> ); } } class People extends React.Component { render(){ return ( <div> <p>How many people are sharing the bill?</p> <input type="text" placeholder="Number of People" onChange={this.props.people}/> <span> People </span> </div> ); } } ReactDOM.render(<Container />, document.getElementById('root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"> </div> 

I can't make the code snippet to run so I will attach a image here.

Answer 1

More than move the button inside the form, I think you should put a type="submit" attribute on the button.

<form onSubmit={this.calculate}>
  <Bill bill={this.handleChange} />
  <Service value={this.state.value} service={this.handleService} />
  <People people={this.handlePeople} />
  <button type="submit">CALCULATE!</button>
</form>

Answer 2

Try moving the button inside the form

 <form onSubmit={this.calculate}>
      <Bill bill={this.handleChange} />
      <Service value={this.state.value} service={this.handleService} />
      <People people={this.handlePeople} />
      <button>
        CALCULATE!
      </button>    
 </form>

And, if you can change some of your components to stateless components. Like so:

const Service = (props) => {
    return (
      <div>
        <p> How was your service?  </p>
        <select value={props.value} onChange={props.service}>
          <option value="0.3">30% - Outstanding </option>
          <option value="0.2">20% - Good </option>
          <option value=".15">15% - It was OK</option>
          <option value=".1">10% - Bad </option>
          <option value=".05">5% Terrible </option>
        </select>
      </div>
    );
}

Answer 3

Since you are using onSubmit event, the button has to be inside the form

<form onSubmit={this.calculate}>
  <Bill bill={this.handleChange} />
  <Service value={this.state.value} service={this.handleService} />
  <People people={this.handlePeople} />
  <button>CALCULATE!</button>
</form>

You could also add onClick event for the button if you want to keep it outside the form like this

<button onClick={this.calculate}>CALCULATE!</button>

Answer 4

Calculate button is outside the form. You should use it inside Form.

<input type="submit" value="Calculate">

Another way to do this is binding click event to button instead of onsubmit event of form.