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

Question

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

Answer 1

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>