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

9 votes198 views3 answers
React js Uncaught RangeError: Maximum call stack size exceeded
Javascript React
0 vote191 views1 answer
Update an object key value in state react
Javascript React
2 votes260 views1 answer
React router 404 redirect
Javascript React
0 vote264 views1 answer
How to Submit Forms and Save Data with React.js
Javascript React
0 vote210 views1 answer
React export multiple component from index.js
Javascript React
5 votes195 views2 answers
What hostings can run react js
Javascript React
0 vote219 views2 answers
React native: how to know th softkey height
Javascript React
1 vote199 views1 answer
Adding media queries in makeStyle material react
Javascript React
0 vote199 views3 answers
How to serve React JS static files with express JS?
Javascript React
0 vote243 views1 answer
Create a link in react js to download xcelfile
Javascript React