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 vote132 views1 answer
React native textinput lowercase
Javascript React
0 vote139 views1 answer
Organize api calls react native folder
Javascript React
3 votes226 views4 answers
React Redux Thunk
Javascript React
0 vote147 views1 answer
Reactive forms angular conditional disabling
Javascript React
2 votes182 views2 answers
Set delay react native
Javascript React
3 votes136 views2 answers
React link without underline
Javascript React
2 votes149 views2 answers
How to change react icon color
Javascript React
2 votes147 views1 answer
Site cannot be accessed broken link or url that doesn’t exist react netlify
Javascript React
0 vote165 views1 answer
How to use two text fields in one single row react js
Javascript React
0 vote164 views1 answer
Web-vitals react
Javascript React