onClick event doesn't work on first click - React - reactjs

Question

I'm a react newbie. Though, I've resolved the issue, just curious to know why it happens, why onClick sends an empty object to backend on first click. Along with sending the data to database I had to update a field on UI, thus, set a state to do the job. and what is the standard practice in these situations. I mean when I have to update the db as well as show the update instantly
const [item,setItem] = useState([]);
const handleAddProducts = e =>{
e.preventDefault();
const productName = e.target.productName.value;
const price = parseFloat(e.target.price.value);
const quantity = parseInt(e.target.quantity.value);
const image = e.target.image.value;
const data = {productName,price,quantity,image};
const url = 'http://localhost:5000/add';
if(data.productName && data.price && data.quantity && data.image){
fetch(url,{
method:'POST',
headers:{
'content-type':'application/json'
},
body:JSON.stringify(item)
})
.then(res=>res.json())
.then(result=>{
if(result.insertedId){
toast('Product Added Successfully');
e.target.reset();
}
})
}
else{
toast("Nothing to Upload");
}
}

Answer 1

I think your handleAddProducts is getting called on an onFormSubmit event, please add a full code snippet so we can help you better.
I'll assume your handleAddProducts function is getting called on a form submit
const handleAddProducts = (e) => {
e.preventDefault()
let { productName, price, quantity, image } = new FormData(e.target)
price = parseFloat(price)
quantity = parseInt(quantity)
const url = 'http://localhost:5000/add'
if (productName && price && quantity && image) {
fetch(url, {
method: 'POST',
headers: {
'content-type': 'application/json',
},
body: JSON.stringify(item),
})
.then((res) => res.json())
.then((result) => {
if (result.insertedId) {
toast('Product Added Successfully')
e.target.reset()
}
})
} else {
toast('Nothing to Upload')
}
}
e.target when a form gets submitted doesn't include the inputs, it holds information about the <form> HTML element itself, and there's no way you can read the inner form values except by using something such as new FormData(e.target).
Talking about how usually React Devs manage these kinds of stuff, this is called inputs state management.
Basically, you keep recording every change that occurs to an input element in a separate state.
ex:
const myComponent = () => {
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [phoneNum, setPhoneNum] = useState('')
return (
<form onSubmit={handleSubmit}>
<input onChange={({ target }) => setFirstName(target.value)} value={firstName} />
<input onChange={({ target }) => setLastName(target.value)} value={lastName} />
<input onChange={({ target }) => setPhoneNum(target.value)} value={phoneNum} />
</form>
)
}