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.
>Solution :
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