Async data will not render

Hi,

Great package btw! I’m having some issues with rendering when it comes to async data.

I’m trying to render the following:

const InfoDisplay = () => {
  const [data, setData] = useState({});

  useEffect(() => {
    async function fetchInfo() {
      const result = await axios
        .get(`${API_URI}/info`)
        .then((resp) => resp.data)
        .catch((err) => [{
          error: err.response,
        }]);

      setData(result);
    }

    fetchInfo();
  }, []);
  return (
    <>
      <TextLoop>
        {
          Object.keys(data).map((index) => {
            return <InfoDisplayItem key={index} data={data[index]} />
          })
        }
      </TextLoop>{" "}
    </>
  );
};

But nothing shows. However when I either remove the <TextLoop><TextLoop> or just use some of the examples given in the README I see stuff rendering. Any ideas why async data won’t render?

[emilnewel]

Thanks @exsesx !

This worked perfectly. 😄

[braposo]

Thanks for replying @exsesx! I haven’t had the chance to look into this yet @emilnewel, I’ll probably do that over the weekend but for now you can use what @exsesx is suggesting.

This seems to be related with how the new child elements are added to the component but can’t know for sure without digging in the code.