oblador / react-native-collapsible

Animated collapsible component for React Native, good for accordions, toggles etc
MIT License
2.42k stars 455 forks source link

Sections not receiving props correctly when adding sections dynamically #452

Closed Torniojaws closed 1 year ago

Torniojaws commented 1 year ago

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:

Dec 5
Dec 9
Dec 15

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:

Dec 15
Dec 15
Dec 15

And in the real use case, I am unable to show correct data in the components when you click the dates in reverse order.

Torniojaws commented 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]);