search

preactjs / preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
https://preactjs.com
MIT License
36.58k stars 1.95k forks source link

Missing key when using rc-animate #615

Open dignifiedquire opened 7 years ago

dignifiedquire commented 7 years ago

It seems there is some difference between React and Preact when using rc-animate. It seems similar to https://github.com/developit/preact/issues/155 but still appears in the latest version.

I have been using https://github.com/react-component/collapse without issues (following the simple example in the readme) with React, but when switching over to Preact I get the following error thrown

screen shot 2017-03-29 at 23 43 17 screen shot 2017-03-29 at 23 44 16

The key is not explicitly set here it seems: https://github.com/react-component/collapse/blob/master/src/Panel.jsx#L63 but I am guessing for single elements React sets the key automatically?

developit commented 7 years ago

Hmm, that's quite odd, I can't think of a reason why React would be needing to set a key automatically. Maybe it defaults to numeric?

dignifiedquire commented 7 years ago

What's also interesting is that, even if I manually a key it doesn' throw anymore but the animation is actually not happening anymore.

developit commented 7 years ago

Hey @dignifiedquire - this is fixed by @hassanbazzi's work in #629. Working to release 8.1.0 with that fix today.

dignifiedquire commented 7 years ago

@developit great to hear thank you! I will try it out once its out asap

developit commented 7 years ago

Should be fixed in 8.1.0, let me know if you're able to test it out :)

dignifiedquire commented 7 years ago

I am afraid the error persists with 8.1.0, exact same issue as originally posted

hassanbazzi commented 7 years ago

It seems fixed to me. Are you sure you upgraded? Can you provide the error?

thysultan commented 7 years ago

React sets keys to preserve order, i.e when conditionally rendering between null, int keys might conflict with user keys when some keys are set and some aren't, maybe floating point ints. In this case i think the error is from rc-animate and not React, the lib is validating that children indeed do have keys and since react auto inserts keys when omitted it works with React.

developit commented 7 years ago

Ah yeah, sounds like we were following a red herring. We'll need preact-compat to emulate the default integer key behavior (which makes me sad).

dignifiedquire commented 7 years ago

I run into yet another issue with the joys of libraries depending on reacts behaviour for how the children methods behave, so I started work implementing them here: https://github.com/developit/preact-compat/pull/400

amareshb commented 6 years ago

I encountered this issue while rendering select tags with "" as value and "None" as display properties. I don't see the issue when I replace the "" value with "none" (some random value).

Please tell me, if there is a better work around.