Skip to content
Advertisement

How to sum, divide values of multiple inputs using onChange event | ReactJS

i try make my first App in react, everything works, but i try take amoun of bill and number of people and divide te bill for person, and add Tip. I know for somebody probably its 5 min solution but i start working with that yesterday and still can’t find solution.

I wanna take bill amount and divide by personAmount + tip if somebody choose tip. What i do wrong

import React, { useState } from 'react'
import style from './BillSplitter.module.css'

const tips = [5, 10, 15, 25]



const Input = ({ label, id, handleChange, name, type, placeholder }) => (
  <>
    <label className={`${style.label}`} htmlFor={id}>{label}</label>
    <input className={`${style.input}`} type={type || "number"} id={id} name={name || id} placeholder={placeholder} onChange={handleChange}></input>
    <br />
  </>
);

const SelectTip = ({ tip }) => {
  <>
    <button className='tipButton' value={tip}></button>
  </>
}

function BillSplitter() {
  const [tipAmount, setTipAmount] = useState(0)
  const [billAmount, setBillAmount] = useState(0)
  const [personAmount, setPersonAmount] = useState(0)


  function handleChange(e) {
    console.log(e.target.value)
  }



  return (
    <div className={`${style.wrapper}`}>
      <div className={`${style.box}`}>
        <div className={`${style.top}`}>
          <h2 className={`${style.title}`}>Bill Splitter</h2>
          <p className={`${style.personBillAmount}`}>Person Bill Amount</p>
          <p onChange={handleChange} className={`${style.totalPersonAmount}`} >$ {tipAmount}</p>
        </div>
        <div className={`${style.bottom}`}>

          <Input handleChange={handleChange} className={`${style.clases}`} placeholder='Amount of bill' label="Bill value">{billAmount}</Input>

          <Input handleChange={handleChange} className={`${style.clases}`} placeholder='Number of people' label="Number of people">{personAmount}</Input>

          <div className={`${style.tipBox}`}>
            <p>Select tip</p>
            {tips.map((tip) => {
              return <button className={`${style.tipButton}`}>{tip} %</button>
            })}
          </div>
        </div>
      </div>
    </div>


  )
}


export default BillSplitter

Advertisement

Answer

Added onChange handler to the Input component and pass the different input setter functions. Then do the calculation when the tip is selected.

Try like below:

const tips = [5, 10, 15, 25];

const Input = ({ label, id, handleChange, name, type, placeholder }) => (
  <React.Fragment>
    <label htmlFor={id}>{label}</label>
    <input
      type={type || "number"}
      id={id}
      name={name || id}
      placeholder={placeholder}
      onChange={(e) => handleChange(e.target.value)}
    ></input>
    <br />
  </React.Fragment>
);

function BillSplitter() {
  const [billAmount, setBillAmount] = React.useState(0);
  const [personAmount, setPersonAmount] = React.useState(0);
  const [perCost, setPerCost] = React.useState(0);

  const calculatePerPeronAmount = (tip) => {
    if (personAmount > 0) {
      setPerCost(((1 + 0.01 * tip) * billAmount) / personAmount);
    }
  };

  return (
    <div>
      <div>
        <div>
          <h2>Bill Splitter</h2>
          <p>Person Bill Amount</p>
          <p>$ {perCost}</p>
        </div>
        <div>
          <Input
            handleChange={setBillAmount}
            placeholder="Amount of bill"
            label="Bill value"
          >
            {billAmount}
          </Input>

          <Input
            handleChange={setPersonAmount}
            placeholder="Number of people"
            label="Number of people"
          >
            {personAmount}
          </Input>

          <div>
            <p>Select tip</p>
            {tips.map((tip) => {
              return (
                <button onClick={() => calculatePerPeronAmount(tip)} key={tip}>
                  {tip} %
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<BillSplitter />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>
Advertisement