Closed Torniojaws closed 1 year ago
It appears it was related to setting the state. Doing it this way made the above behaviour happen
// getValueFromProps() returns a string
const [someValue, setSomeValue] = useState<string>(getValueFromProps(props));
Doing it this way works correctly so far:
const [someValue, setSomeValue] = useState<string>('');
useEffect(() => {
// some logic
setSomeValue(valueFromTheLogic); // the same string as above
}, [props]);
There seems to be a problem with props when appending sections dynamically and then working with them.
Use case:
I have a calendar component where when clicking on a date, it appends an object to an array in the parent state and then those items are sorted by date (oldest first). Then that sorted parent state is passed to Accordion sections data, and I render a component for the data in each.
Now, if I click the calendar in date order, say Dec 5, Dec 9, and Dec 15, then the sections receive their correct data. So if in the Accordion section I log
props.data.date
(for example), I would see logs like:But if I click the calendar in reverse order, going Dec 15, Dec 9, Dec 5, then the Accordion sections will log the SAME thing three times. Meaning it has received the same object three times, instead of receiving three unique objects:
And in the real use case, I am unable to show correct data in the components when you click the dates in reverse order.