Newly created list elements do not appear

[Marcel Michelfelder]

Describe the bug

When mapping through list elements, and the list changes after the initial render, the list items are not rendered properly (especially when wrapped inside the Text component)

To reproduce

Go to the sandbox and paste following code:

const FONT_FAMILY_ROOT = '"Titillium Web", sans-serif';
const SOUND_TYPE_URL = '/assets/sounds/type.mp3';

const audioSettings = { common: { volume: 0.25 } };
const playersSettings = { type: { src: [SOUND_TYPE_URL], loop: true } };
const bleepsSettings = { type: { player: 'type' } };
const animatorGeneral = { duration: { enter: 150, exit: 150, stagger: 40 } };

const Sandbox = () => {
  const [activate, setActivate] = React.useState(true);

  
  const [texts, setTexts] = React.useState(["foo", "bar"]);
  React.useEffect(() => {
    const timeout = setTimeout(() => setTexts([...texts, "another Text"]), 1000);
    return () => clearTimeout(timeout);
  }, [texts]);

  return (
    <ArwesThemeProvider>
      <BleepsProvider
        audioSettings={audioSettings}
        playersSettings={playersSettings}
        bleepsSettings={bleepsSettings}
      >
        <StylesBaseline styles={{
          body: { fontFamily: FONT_FAMILY_ROOT }
        }} />
        <AnimatorGeneralProvider animator={animatorGeneral}>
          <Animator animator={{ activate }}>

            <List>
              <li><Text>Lorem ipsum lov sit amet.</Text></li>
              <li><Text>Lorem ipsum lov sit amet.</Text></li>
              { texts.map((text, index) => (
                <li
                  key={index}
                >
                   <Text>
                     {text}
                   </Text>
                </li>
                )) }
            </List>


          </Animator>
        </AnimatorGeneralProvider>
      </BleepsProvider>
    </ArwesThemeProvider>
  );
};

render(<Sandbox />);

Expected behavior

List items appear and are rendered correctly

Development environment

Sandbox ( v. 1.0.0-alpha.19 )

Additional Info

One can see that the icons are created (hovering over the not-rendered list elements yields a text-cursor) You can also see the elements with the browser development tools

[Romel Perez]

Hey @InsOpDe !

This bug was recently reported and fixed. It should work fine for the next release.

Thank you for your report!

[Marcel Michelfelder]

Sorry, could not find it via the search-functionality

[Romel Perez]

Don't worry, it was reported in Discord 😉

[Marcel Michelfelder]

@romelperez
Is there a workaround for it, until the next version is released?

[Romel Perez]

Hey @InsOpDe, for now, the dynamically created animated components should be configured as animator={{ root: true }}. That would make them work independently from their parents' animators, and fix the bug temporarily.

[Marcel Michelfelder]

thanks, that worked!