Preact: Missing key when using rc-animate

[dignifiedquire]

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

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]

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]

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]

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

[dignifiedquire]

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

[developit]

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

[dignifiedquire]

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

[hassanbazzi]

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

[thysultan]

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]

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]

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]

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.