CODEWITHSUNDEEP
javascriptreactjs
bradrar
bradrar

Reputation: 737

Why does my calculate function not working?

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. Tip Calculator using react

Upvotes: 0

Views: 116

Answers (4)

Wolgan Ens
Wolgan Ens

Reputation: 385

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>

Upvotes: 2

Manish Mahajan
Manish Mahajan

Reputation: 1166

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.

Upvotes: 1

Giedrius
Giedrius

Reputation: 613

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>

Upvotes: 1

Meeses
Meeses

Reputation: 144

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>
    );
}

Upvotes: 1

Related Questions