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
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>