I am trying to collect data to insert in database. I am using hooks states for this matter.
I have a products state:
const [product, setProduct] = useState(
image: '',
tags: [],
available_colors: colors,
available_sizes: talles,
})
the available_colors depends on other state which is an array of colors. This array can be pushed with new elements and they are printed in the html.
But the problem is, it is not updating in the products state.
Here is the colors state
const [colors, setColors] = useState([
{ name: 'blue' },
{ name: 'green' },
{ name: 'red' },
])
I am updating it like this:
const setColorsAttr = async () => {
const value = await Swal.fire({
title: 'Nuevo Color',
html: `
<input type="text" id="talle-input" class="swal2-input"/>
`,
showCancelButton: true,
focusConfirm: false,
preConfirm: () => {
const color = Swal.getPopup().querySelector("#talle-input").value
return color
}
})
if (value.isDismissed !== true) {
setColors([
...colors,
{ name: value.value }
])
setProduct({
...product,
[product.available_colors]: colors
})
}
}
But in the products isn't changing. I would appreciate your help! Thanks in advance!
setColorsAttr forms a closure over the current colors and setColors will update colors in the next render, so you can't use the latest colors right away.
You can use useEffect with colors as a dependency:
useEffect(() => {
setProduct(previousProduct => ({...previousProduct, available_colors: colors}))
}, [colors])
setProduct in setColorsAttr can be removed
This happens because, setState works asynchronously, which means state doesn't update immediately.
To overcome this you need to update the product state in useEffect when color is updated.
useEffect(() => { setProduct(previousProduct =>
({...previousProduct, available_colors: colors})) }, [colors])
To learn more about setState asynchronous working , checkout this . Why is setState in reactjs Async instead of Sync?