title: Array of Refs in functional component to change classnames of individual items via classList
body: <p>I'm converting my jQuery based project to react and run into an issue with refs in a functional component: I have a huge wordlist and each word should be accessed via their own ref so that I can change individual classNames, depending on what the user is typing <em>(I can do it with a huge state object, but the performance suffers)</em>.</p>
  
  <p>If I try to access the classlist of a ref, its undefined. Now I'm not sure if classList is generally not available in functional components or if the refs aren't properly initialized:</p>
  
  <pre><code>const wordsRef = useRef([...Array(1000)].map(() =&gt; createRef()));
  
  ...
  
  const displayWords = words.map((word, index) =&gt; (
      &lt;React.Fragment key={index}&gt;
        &lt;span
          ref={wordsRef.current[index]}
        &gt;
          {word}
        &lt;/span&gt;{' '}
      &lt;/React.Fragment&gt;
    ));
  
  ...
  
  useEffect(() =&gt; {
    wordsRef.current[0].classList.add('highlight');
  });
  
  ...
  
  return (
      &lt;div className={classes.root}&gt;
        {displayWords}
      &lt;/div&gt;
    );
  </code></pre>
  
  <p><em>Error: Cannot read property 'add' of undefined.</em></p>
  
  <p>I was only able to find examples with classList, but this is propably not the way to add/remove classes in a functional component?</p>