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

6 votes341 views3 answers
Apply required attribute on input using ternary operator using react js
Javascript React
0 vote264 views1 answer
Create-react-app height issues with flex
Javascript React
0 vote324 views1 answer
React style css image
Javascript React
0 vote312 views1 answer
React tutorial componentDidMount() componentWillUnmount()
Javascript React
0 vote271 views1 answer
Switch react router
Javascript React
0 vote310 views1 answer
How to make the width of a react native element adjust according to the contents
Javascript React
0 vote288 views1 answer
Jsx not working in react vscode
Javascript React
0 vote324 views1 answer
How to detect if app is loosing focuse in react native
Javascript React
0 vote338 views2 answers
Datepicker range npm reactjs
Javascript React
0 vote296 views1 answer
React json object pretty
Javascript React