title: How to add animate on scroll effect to fetched data react
body: <h1>Context:</h1>
  <p>I want to add an AOS-effect to multiple divs filled with data from a server, which are rendered after the initial render:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {useEffect, useState} from "react";
  
  export const Test = () =&gt; {
    const [data, setData] = useState([]);
    
    async function fetchData() {
      //Example fetch request
      const response = await fetch(API, {method:"GET"});
      const json = await response.json();
      setData(json);
    }
    
    useEffect(() =&gt; {fetchData();}, []);
    
    return (
      &lt;&gt;
        {
          data.map((text, index) =&gt; {
            //add aos effect to each div
            &lt;div key={index}&gt;
              {text}
            &lt;/div&gt;
          });
        }
      &lt;/&gt;
    )
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <h1>What I've tried:</h1>
  <p>I tried to import <a href="https://michalsnik.github.io/aos/" rel="nofollow noreferrer">AOS</a> and add it as in this <a href="https://stackoverflow.com/a/59507994/9947071">question</a>:</p>
  <pre><code>&lt;div key={index} data-aos=&quot;fadeIn&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>This had no effect at all.</p>
  <p>I also looked at <a href="https://www.npmjs.com/package/react-animate-on-scroll" rel="nofollow noreferrer">react-animate-on-scroll</a>, but it is not compatible with react v. 18.1.0:</p>
  <p><a href="https://i.stack.imgur.com/LDxfx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LDxfx.png" alt="incompatible with react 18.1.0" /></a></p>
  <h1>Question:</h1>
  <p>How can I get animate on scroll (AOS) to work on fetched data in react?</p>