Add object to array inside an object(React useState) - reactjs

Question

I have a following state declared
const [state, setState] = useState({
title: "",
subtitle: "",
products: [],
state.products is an array of objects e.g.
products = [{a: "", b: "", c: ""}]
On form submit I want to take the input values and append them to the products array as an object.
My submit handler doesn't do what I want. Where have I gone wrong?
function handleSubmit(e) {
const newProduct= {"a": e.target[0].value, "b": e.target[2].value, "c": e.target[1].value}
setState({...state, products: [...state.products, newProduct]})
}

Answer 1

You could do something like this
function handleSubmit(e) {
const newProduct = {
a: e.target[0].value,
b: e.target[2].value,
c: e.target[1].value
};
setState(prevState => ({
...prevState,
products: [...prevState.products, newProduct]
}));
}

Answer 2

If you console.log outside of the state setter, you will not get the latest copy of the state, i.e.,
const Component = () => {
const [state, setState] = useState(...);
function handler(e) {
...
setState(...);
console.log(state.products); // This will print the previous version of the state.
}
}
This is the expected behavior as state setters are asynchronous.
So instead I log like this,
function handler(e) {
const newProduct = ...;
...
setState(prevState => {
const newState = {...prevState, products: [...prevState.products, newProduct]}; // update state as you did before.
console.log(newState);
return newState;
});
}
You can also use
useEffect(() => {
console.log(state)
}, [state, state.products]);