title: Creating refs inside a loop
body: <p>I am trying to create multiple refs based on the length of input array.</p>
  
  <pre><code>export default function test(props) {
      const numRefs = props.data.length;
      let [refs, setRefs] = useState([]);
  
      for (let i = 0; i &lt; numrefs; i++) {
          let ref = useRef(null);
          setRefs(result =&gt; [...result, ref]);
      }
  
  
      return (
          &lt;div&gt;
              // Then I want to return numRefs number of divs each with a ref = one of ref from refs array
              &lt;div ref = {}&gt;&lt;/div&gt;
          &lt;/div&gt;
      )
  } 
  </code></pre>
  
  <p>React doesn't allow you to have hooks inside a loop and I am getting the error -></p>
  
  <p>' React Hook "useRef" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render'</p>
  
  <p>Is it possible to achieve this?</p>