React - JSX 中的渲染信息

Question

I am building a tip calculator. I need to render the result of the formula calculation in the div element. It works if insert formula directly into div, but I believe I have to use useState in this case. Here is the code I use. Could you please suggest how to fix it? thanks.

import React, { useState } from 'react';
import './Calculation.css';
import Card from './UI/Card';

const Calculation = (props) => {

    const [tipPP, setTipPP]=useState('0');
    const [totalPP, setTotalPP] = useState('0');
        
        const calcHandler =()=>{
            
            setTipPP(((props.bill * props.tip) / props.people)/100);
            setTotalPP(props.bill/props.people + tipPP)

        }
        

    return (
        <Card className='calcCard' onChange = {calcHandler}>
            <div className='calcTip' >Tip amount<span className='tipTotal' >${tipPP}</span></div>
            <div className='calcTotal'>Total<span>${totalPP}</span></div>
            <Card className='resetBtn'>Reset</Card>
        </Card>
    )
};

export default Calculation;

Answer 1

How about :

import React, { useState, useEffect } from 'react';
import './Calculation.css';
import Card from './UI/Card';

const Calculation = (props) => {

    const [tipPP, setTipPP]=useState('0');
    const [totalPP, setTotalPP] = useState('0');
        
        const calcHandler =(e)=>{
            e.preventDefault();
            setTipPP(((props.bill * props.tip) / props.people)/100);
            setTotalPP(props.bill/props.people + tipPP)

        }
        
     useEffect(() => {
         console.log("tipPP changed!");
     }, [tipPP]);

    return (
        <Card className='calcCard' onChange = {(e) => calcHandler()}>
            <div className='calcTip' >Tip amount<span className='tipTotal' >${tipPP}</span></div>
            <div className='calcTotal'>Total<span>${totalPP}</span></div>
            <Card className='resetBtn'>Reset</Card>
        </Card>
    )
};

export default Calculation;

useEffect will re-render the component when the value of tipPP changes. Please try this.