REACT, form submit after preventDefault not working until submit button is clicked a second time-CodePudding

    import React , {useState } from "react";
import Button from 'react-bootstrap/Button';
import Form from "react-bootstrap/Form"
import 'bootstrap/dist/css/bootstrap.min.css';
import {push,ref} from "firebase/database";
import db from "./firebase";


function App() {
  const [age, setAge] = useState("");
  const [hes, setHes] = useState("");
  const [visa, setVisa] = useState("");
  const [islem , setIslem] = useState("");
  
  const handleSubmit = (event) =>{
    event.preventDefault();
    setAge(event.target[0].value);
    setHes(event.target[1].value);
    setVisa(event.target[2].value);
    push(ref(db,"info"),{
      age: age,
      hes: hes,
      visa : visa,
      islem : islem
    })
  }
  return (
    <div>
    <Form onSubmit={
      handleSubmit
    }>
    <Form.Group   className="mb-3 mx-3" >
      <Form.Label>AGE</Form.Label>
      <Form.Control name="age" type="text" placeholder="AGE: " />
    </Form.Group>
    <Form.Group  className="mb-3 mx-3" >
      <Form.Label>HES</Form.Label>
      <Form.Control  name="hes" type="text" placeholder="Hes CODE: " />
      
    </Form.Group>
    <Form.Group  className="mb-3 mx-3" >
      <Form.Label>VISA</Form.Label>
      <Form.Control  name="visa" type="text" placeholder="Visa: " />
    </Form.Group>
  
    <div className="d-grid gap-2">
      <Button onClick = {() =>{
        setIslem("NC")
      }}variant="secondary" type="submit" size="lg">
      New Customer
      </Button>
      <Button onClick = {() =>{
        
        setIslem("NCC");
      }}variant="secondary" type="submit" size="lg">
      New Cards
      </Button>
      <Button onClick = {() =>{
        
        setIslem("FI");
      }}variant="secondary" type="submit" size="lg">
      For information
      </Button>
      <Button onClick = {() =>{
        
        setIslem("WDM");
      }}variant="secondary" type="submit" size="lg">
      Withdraw / Deposit Money
      </Button>
      <Button onClick = {() =>{
        
        setIslem("IO");
      }}variant="secondary" type="submit" size="lg">
      Insurance Operations
      </Button>
      <Button onClick = {() =>{
        
        setIslem("RO");
      }}variant="secondary" type="submit" size="lg">
      Retirement Operations
      </Button>
      <Button onClick = {(e) =>{
        setIslem("PT")  
      }}variant="secondary" type="submit" size="lg">
      Paying Fines / Taxes / Debt
      </Button>
      <Button onClick = {() =>{
        
        setIslem("SME");
      }}variant="secondary" type="submit" size="lg">
      SME Operations
      </Button>
      <Button onClick = {() =>{
        
        setIslem("INO");
      }}variant="secondary" type="submit" size="lg">
      Investment Operations
      </Button>
      <Button  onClick = {() =>{
        
        setIslem("MM");
      }}variant="secondary" type="submit" size="lg">
      Money Management
      </Button>
  </div>
    
  </Form>
  
  </div>
  
  );
}

export default App;

This is my code, database writing data after only 2nd submission and it is writing old data. I want to write data in first submission. For example: in first submission my data is : age = 15, in second submission my data is : age = 16,

In database it is written like: [age = "" , age = "15"]. It is coming always 1 step behind. How can I solve this.

CodePudding user response：

It would be better if you update the states at the time of modification and not at the time of submission, anyway, to fix the problem you have I suggest you send the parameters of the form instead of the states since React will not change the value of these until the next render.

const handleSubmit = (event) =>{
    event.preventDefault();
    setAge(event.target[0].value);
    setHes(event.target[1].value);
    setVisa(event.target[2].value);
    push(ref(db,"info"),{
      age: event.target[0].value,
      hes: event.target[1].value,
      visa : event.target[2].value,
      islem : islem
    })
  }

In this case however the state variables (setAge, setHes, setVisa) are unnecessary I would say