Function passing null at first run - json

Question

i have a little problem with passing data into a JSON file. I have a function that runs onClick. The first run returned:
{
"title": "",
"description": "",
"price": "",
"id": 1
}
but all next runs returns data correctly:
{
"title": "Example title",
"description": "Example description",
"price": "$7",
"id": 2
}
Anyone know how to fix it?
My react code:
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [price, setPrice] = useState('');
const addToCart = (e) => {
e.preventDefault();
setTitle('Example title');
setDescription('Example description');
setPrice('$' + Math.floor(Math.random() * 10 + 1));
const product = { title, description, price};
fetch('http://localhost:8000/basket', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(product)
})
.catch((err) => {
console.log(err.message);
})
}

Answer 1

Because setState is async and only update when component re-render. So you can declare variable to use in post and in setState.
const addToCart = (e) => {
e.preventDefault();
const product = {
title: "Example title",
description: "Example description",
price: "$" + Math.floor(Math.random() * 10 + 1),
};
setTitle(product.title);
setDescription(product.description);
setPrice(product.price);
fetch("http://localhost:8000/basket", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(product),
}).catch((err) => {
console.log(err.message);
});
};

Answer 2

It's likely breaking because you're trying to set state while making a fetch call, on initial empty state values. The design here is wrong, you shouldn't be assigning hard coded state while making a fetch call.
const Form = () => {
const [value, setValue] = useState('')
const submit = () => {
// make fetch call here using value
}
return <form onSubmit={(e) => {e.preventDefault(); submit()}}>
<input type='text' value={value} onChange={(e) => setValue(e.target.value)}
</form>
}