Cascade doesn't work on mapped components

[getnorthern]

Hi,

If I use something like the following:

<Fade bottom cascade duration={1000}> <div> {MY_DATA.options.map((option) => ( <RadioButton key={option.value} label={label} option={option} answerValue={answerValue} onRadioSelected={onOptionSelected} /> ))} </div> </Fade>

...the cascade doesn't work - all the mapped items (RadioButtons) fade in at the same time. Am I setting this up incorrectly, or is this a limitation?

Thanks for all your work on this. :)

[jdockwarder]

Same problem here!

[PeterKottas]

I would consider adding Fade wrapper and setting delay based on the index in map function. I assume the cascade does something similar internally.

[wievtsal]

Same problem.
But we have one solution - use it without mapped component:

<Fade cascade top>
  <div>
    {items.map(item => (
       <div>{item}</div>
    )}
  </div>
</Fade>

[LhonRafaat]

Same problem in oct 2020

[ajmeese7]

+1, still experiencing this issue. Any help would be greatly appreciated :) I'm at my wit's end on this one

[amingarro]

Same problem in August 2021

[Fardeen-Awais]

I have the same issue and still facing this in 26 Oct 2022

[Fardeen-Awais]

I Solved this solution by adding
import config from 'react-reveal/globals';
config({ ssrFadeout: true });

After importing this i can use the effect like this below:
//Content

Reference : https://www.react-reveal.com/docs/
Read the server Side rendering
I hope this will help you up reply me with your email address