fix: set slider wrapper key based on children keys passed #2288
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context
Currently
react-slick
does not support dynamic children, where if any of the children is updated after the slider is mounted, the slider does not re-render accordingly. This is due to the wrapper component having it's ownkey
calculation that does not take into account the children's keys that was passed.In my work, we were facing issues where even the children were updated after mounting, the slider does not re-render the children accordingly. I had to fork the this repo's code to our code and made the changes in this PR in order for it to work.
Some existing issues that reported the same issue:
Solution
Utilise a combination of the children's
key
for the wrapper, this ensures that if any of the children's key updates, the wrapper knows to re-render accordingly.Unit tests are all passing after the changes: