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

0 vote386 views1 answer
React native add bottom tab and drawer menu
Javascript React
0 vote364 views1 answer
How to use elements of 'react-router-dom'
Javascript React
0 vote383 views1 answer
React native cli sdk.dir
Javascript React
32 votes380 views1 answer
React roouter dom
Javascript React
0 vote374 views1 answer
React add link to button
Javascript React
8 votes348 views3 answers
React js props
Javascript React
0 vote340 views1 answer
Error while updating linecap of a view polyline react-native-maps
Javascript React
0 vote409 views1 answer
React inject component into another component
Javascript React
4 votes358 views3 answers
React js get screen size
Javascript React
32 votes379 views5 answers
React disable eslint errors
Javascript React