I have an object state priceRanges in component A , which i initialize with a key and a value:
const [priceRanges, setPriceRanges] = useState({
[randomId]: {
"price": 0,
"quantity": 0
}
})
And then pass it through props to component B:
<ComponentB pricesRanges={pricesRanges} ...props />
The problem is that in Component B , I am converting this object into an array on useEffect:
React.useEffect(() => {
const getArrayData = () => {
const keys = Object.keys(priceRanges)
keys.map(key => {
console.log(priceRanges[key]["price"])
priceRangesArray.push({
id: key,
price: priceRanges[key]["price"] ? priceRanges[key]["price"] : 0,
quantity: priceRanges[key]["quantity"] ? priceRanges[key]["quantity"] : 0
})
})
}
getArrayData()
}, [priceRanges])
But the component does not rerender after the useEffect has run. As such, the component does not render the initial state that pricesRanges was initialized with. To test this, I did this:
{priceRangesArray.length > 0 ?
(priceRangesArray.map(quantityAndPrice => {
return (
<div className="flex" key={quantityAndPrice.id}>
{console.log("I AM RENDERING")}
<input
...props
/>
<input
...props
/>
</div>
)
})) :<p>Hello</p>}
Which always renders Hello on mount . How can I tackle this ? Thanks you !
The only way to cause a rerender is to set state. Mutating an array during a useEffect will not cause a rerender. So you could fix this by adding a state variable, and then setting state once you've calculated the array.
However, i think that's not the right approach here. Your array is derived data: it's directly based on what's in priceRanges, and you don't want it to ever deviate from that. So for this, i would calculate the value in line during rendering the component:
const Example = ({ priceRanges }) => {
const keys = Object.keys(priceRanges);
const priceRangesArray = keys.map((key) => {
return {
id: key,
price: priceRanges[key]["price"] ? priceRanges[key]["price"] : 0,
quantity: priceRanges[key]["quantity"] ? priceRanges[key]["quantity"] : 0,
};
});
// ...rest of the component
}
If performance is a concern, you can wrap this in useMemo to skip the calculation if priceRanges has not changed.
const Example = ({ priceRanges }) => {
const priceRangesArray = useMemo(() => {
const keys = Object.keys(priceRanges);
return keys.map((key) => {
return {
id: key,
price: priceRanges[key]["price"] ? priceRanges[key]["price"] : 0,
quantity: priceRanges[key]["quantity"] ? priceRanges[key]["quantity"] : 0,
};
});
}, [priceRanges]);
// ... rest of the component
};