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

1 vote493 views1 answer
React native flatlist hide scrollbar
Javascript React
-1 vote379 views4 answers
React native reset cache
Javascript React
0 vote364 views1 answer
Shallow render in react
Javascript React
13 votes311 views1 answer
ReactDOM is not defined
Javascript React
0 vote398 views1 answer
Redirect to another path react
Javascript React
5 votes414 views1 answer
Redirect in netlify react
Javascript React
0 vote394 views1 answer
Npm react native turn by turn navigation
Javascript React
4 votes374 views1 answer
Enable emmit on react
Javascript React
31 votes377 views1 answer
Npm install react-router-dom --save
Javascript React
3 votes403 views3 answers
How to remove global react-native-cli package
Javascript React