Setting Up the Project

To initiate the React project, we can use Create React App. To do this, execute the following command:

npx create-react-app tip-calculator

This command will set up the foundational structure for your React application.

Building the Tip Calculator Application

To develop the tip calculator, we will start with the following code:

import { useState } from "react";

export default function App() {

const [subtotal, setSubtotal] = useState(0);

const [numDiners, setNumDiners] = useState(0);

const [tipPercentage, setTipPercentage] = useState(0);

const [result, setResult] = useState({});

const submit = (e) => {

e.preventDefault();

if (+subtotal <= 0 || +numDiners <= 0 || +tipPercentage <= 0) {

return;

}

const total = +subtotal * (1 + +tipPercentage);

setResult({ total, totalPerDiner: +total / +numDiners });

};

return (

<div className="App">

<form onSubmit={submit}>

<fieldset>

<label>Subtotal</label>

<input

value={subtotal}

onChange={(e) => setSubtotal(e.target.value)}

/>

</fieldset>

<fieldset>

<label>Number of People Sharing the Bill</label>

<input

value={numDiners}

onChange={(e) => setNumDiners(e.target.value)}

/>

</fieldset>

<fieldset>

<label>Tip Percentage</label>

<select

value={tipPercentage}

onChange={(e) => setTipPercentage(e.target.value)}

>

<option value="0">0%</option>

<option value="0.05">5%</option>

<option value="0.1">10%</option>

<option value="0.15">15%</option>

<option value="0.2">20%</option>

</select>

</fieldset>

<button type="submit">Calculate</button>

</form>

<p>Total: {result.total && result.total.toFixed(2)}</p>

<p>

Total per Diner:{" "}

{result.totalPerDiner && result.totalPerDiner.toFixed(2)}

</p>

</div>

);

}

In this code, we define states for the subtotal, number of diners, tip percentage, and the result.

1. States:
   • subtotal represents the total amount before tips.
   • numDiners indicates how many people are sharing the bill.
   • tipPercentage stores the selected tip percentage (between 0 and 100).
   • result holds the calculated totals.
2. Submit Function:
   • The submit function prevents the default form submission, checks for valid values, calculates the total and per diner amounts, and updates the result state accordingly.
3. Rendering:
   • The return statement displays input fields, allowing users to enter their values. The form utilizes the onSubmit property to handle submissions, and the results are shown below.