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

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