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>