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

32 votes307 views1 answer
React touter dom
Javascript React
0 vote321 views1 answer
Event handling in react documentation
Javascript React
0 vote330 views1 answer
Make forn awesome icon clickable in react
Javascript React
1 vote355 views1 answer
Reactjs cloudflare
Javascript React
0 vote330 views1 answer
Returned data has p tags react
Javascript React
23 votes322 views4 answers
Click to copy react
Javascript React
18 votes320 views2 answers
How to import background image in inline css in react
Javascript React
-1 vote296 views1 answer
Vimeo player react native
Javascript React
0 vote379 views2 answers
How to spot Error: Maximum update depth exceeded. in react
Javascript React
1 vote322 views1 answer
Programmatic title react
Javascript React