No animation when rendered with no children, then with some children

[ololoepepe]

The following example results in style="animation-duration: 0s;" even after some children are finally rendered.

import React, {useEffect, useState} from 'react';

const Component = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const timer = setTimeout(() => {
      setItems([{id: 1, text: 'abcde'}, {id: 2, text: 'fghij'}]);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <div style={{height: '50px'}}>
      <Marquee>
        {
          items.map(item => (
            <div key={item.id}>{item.text}</div>
          ))
        }
      </Marquee>
    </div>
  );
};

Workaround: add a key prop to the Marquee which reflects changes in items count.

Upd.: seems that we may just add children as a dependency here: https://github.com/mxmzb/react-marquee-slider/blob/master/src/Marquee.tsx#L97 This should also allow to automatically adjust animation speed if the content changes.