React result from input onChange

Question

On my page i want to make a simple function that give me the resulte of ( result = venteTotal-VentePaiement-VenteAnnulation / solde = vente.vt-vente.pt-vente.at )

where i want to display :

<form className='form form-journal' onSubmit={onSubmitDay}>
                          <div className='input-grp'>
                          <label>Date</label>
                          <input 
                              type="date" 
                              name="date" 
                              id="date" 
                              value={dateCourrante.toString()}
                              onChange={onSetDate} />
                          </div>
                          <div className='input-grp'>
                              <label>coupeur</label>
                              <Select name='coupeur' className='select-coupeur' id='coupeur' styles={selectStyle} options={coupeurs} />
                          </div>
                          <div className='input-grp'>
                          <label>Vente totale</label>
                          <input type="number" name="vt" id="vt" placeholder='200000' onChange={handleSolde} /><span>Fcfa</span>
                          </div>
                          <div className='input-grp'>
                          <label>Annulation totale</label>
                          <input type="number" name="at" id="at" placeholder='0' onChange={handleSolde} /><span>Fcfa</span>
                          </div>
                          <div className='input-grp'>
                          <label>Paiement totale</label>
                          <input type="number" name="pt" id="pt" placeholder='350000' onChange={handleSolde} /><span>Fcfa</span>
                          </div>
                          <p className='solde'>[where i take the result]Solde : <span>{solde}</span> Fcfa</p>
                          <button type="submit">Enregistrer</button>
                        </form> 

handleSolde function :

const handleSolde = e => {
    const { name, value } = e.target;
    setVente(prevState => ({
      ...vente,
      [name]: value,
    }));
    setSolde(vente.vt-(vente.at+vente.pt));
    console.log(name, value);
  };

with this code the result of solde have a strange reaction at user input , it's look like he take the last result of input ( without the last key ) ... someone see the problem please ?

Answer 1

The final code to achieve the task, i'm open for purpose to inprove :

import React, {useEffect, useState} from 'react'
export default function Test() {

  
  const [solde, setSolde] = useState(0);
  const [vente, setVente] = useState(0);
  const [paiement, setPaiement] = useState(0);
  const [annulation, setAnnulation] = useState(0);
  const handleChange = (e) => {
    switch (e.target.name) {
      case 'vente':
        setVente(e.target.value)
        break;
      case 'paiement':
        setPaiement(e.target.value)
        break;
      case 'annulation':
        setAnnulation(e.target.value)
        break;
      default:
        break;
    }
  }
  useEffect(() => {
    setSolde(vente-paiement-annulation);
  }, [vente, paiement, annulation])
  return (
    <>
        <div>Test</div>
        {/* Tester les composants à probleme ici pour les isoler et les corriger */}
        <input type="text" name='vente' onChange={handleChange}/>
        <input type="text" name='paiement' onChange={handleChange}/>
        <input type="text" name='annulation' onChange={handleChange}/>
        {solde}
    </>
  )
}

Answer 2

Try doing the setSolde(vente.vt-(vente.at+vente.pt)); in a useEffect hook, that will be triggered every time that the setVente changes.

Add the vente to the array of dependencies of the useEffect