Daydreamer-riri / transition-hooks

An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group
https://transition-hooks.netlify.app/
MIT License
12 stars 1 forks source link

[Feature] Include index in List Transition #4

Closed A1X5H04 closed 1 month ago

A1X5H04 commented 2 months ago

Guess I am here again 😅, I was creating a complex form with array, When using the list transition I find out that it does not include index which is necessary to differentiate between forms items, I request you to add include index in the list transition just like how the map does

array.map(item, index) => (
<div>
<input name={`item.${index}.value}`}
                      ^= (index is necessary to differentiate)
</div>

))
Daydreamer-riri commented 2 months ago

ListTransition does not provide index because it has no semantics (the index used by its internal map is not the same as the index of the state array because it contains the element being retired).

You can use key:

<>
  {transition((item, { key }) => (
    <input name={key} />
  )}
<>

If you don't pass keyExtractor, the key is a self-incrementing number with no semantics. You can use keyExtractor to make the key of each item semantic.

Daydreamer-riri commented 1 month ago

Hi @A1X5H04 , I'm going to close this issue. Do you have any questions?

A1X5H04 commented 1 month ago

No, thanks for your reply