Array of refs react

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const words = ['Many', 'Words'];

const App = () => {
  const wordsRef = useRef([]);

  const displayWords = words.map((word, i) => (
    <React.Fragment key={i}>
      <span ref={el => (wordsRef.current = [...wordsRef.current, el])}>
        {word}
      </span>
    </React.Fragment>
  ));

  useEffect(() => {
    console.log(wordsRef);
    console.log(wordsRef.current[0].classList);
  });

  return <div>{displayWords}</div>;
};

ReactDOM.render(<App />, document.getElementById('root'));

Source: stackoverflow.com

Similar codes

11 votes132 views2 answers
How to add react icons using npm
Javascript React
11 votes126 views2 answers
Shadow using react native
Javascript React
0 vote125 views1 answer
Show uploaded image in react/nextjs
Javascript React
2 votes130 views1 answer
React native seperator code
Javascript React
0 vote129 views1 answer
React Redux store exemple
Javascript React
0 vote134 views1 answer
Module not found: Can't resolve '@date-io/date-fns' in 'C:\Users\61455\Documents\React apps\mya2o\src\pages'
Javascript React
7 votes134 views1 answer
React Hook "React.useState" is called in function "placeItem" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
0 vote131 views1 answer
ReactRender
Javascript React
0 vote131 views1 answer
Rich text react renderer
Javascript React
0 vote136 views2 answers
React arrow function component
Javascript React