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 vote158 views1 answer
Found page without a React Component as default export in
Javascript React
0 vote192 views1 answer
Render object id in an array reactjs from database
Javascript React
3 votes150 views1 answer
Force update react hooks
Javascript React
133 votes498 views5 answers
Npx create-react-app
Javascript React
0 vote159 views1 answer
Application/ld+json react
Javascript React
0 vote151 views1 answer
How to disable RectButton from react-native-gesture-handler
Javascript React
3 votes169 views3 answers
React ReferenceError: regeneratorRuntime is not defined
Javascript React
4 votes168 views2 answers
Materialize for react
Javascript React
0 vote190 views1 answer
How to get parent's ref react
Javascript React
7 votes159 views3 answers
How to update react state array
Javascript React