Can I use document.getElementByID in React

Question

I am having a songKey array as a STATE. Its data populates from API. I am rendering JSX using this array data. I like to add useRef in order to refer elements from the JSX. Is it possible to add useRef hooks via code automatically ? or shall I use document.getElementById() function to refer elements ?

  const [songKey, songKeyController] = useState([]);
  ...
  ...
  ...
  ...
  ...
  const renderLyrics = () => {
    let lyrics = [];
    if (songKey) {
      lyrics = songKey.map((key) => (
        <div key={key} className={`lyrics_container ${key}`}>
          <div className="lyrics_data tamil-font">
            {props.currentSong.Data[key]}
          </div>
        </div>
      ));
    }
    return lyrics;
  };

I need to scroll element while clicking on the navigation link., — Shanthaji Jeybert, Mar 06 '22 at 07:32
if you trying to select elements in same level of single parent use hook in parent then select child with `querySelectorAll` to have reference to all child elements so you can access all childs with one hook if i understand it right — Amir Rahman, Mar 06 '22 at 07:39
I guess You can use useref like here https://stackoverflow.com/a/51828976/2290153 — Matthias Wiedemann, Mar 06 '22 at 07:39

score -1 · Answer 1 · answered Mar 06 '22 at 08:11

I dont recommend using dom elements directly in React but if you are using it anyways then you can do it in way

use useRef in parent element then simply use querySelectorAll then use childs with index value of that array to access them directly

see the Example

main.jsx

import React, { useEffect, useRef, useState } from "react";

export default function Main() {
  const EL = useRef(null);

  const [data, setData] = useState(["First", "Second", "Third", "Fourth"]);

  useEffect(() => {
    const childs = EL.current.querySelectorAll(".child");

    // fun demo
    let index = 0;
    setInterval(() => {
      const curr = childs[index % childs.length];
      childs.forEach((each) => (each.style.background = ""));
      curr.style.background = "red";
      console.log(curr);
      index++;
    }, 1000);
    // fun demo

  }, [data]);

  return (
    <div className="root" ref={EL}>
      {data.map((each, i) => {
        return (
          <div className="child" key={i}>
            {each}
          </div>
        );
      })}
    </div>
  );
}

Can I use document.getElementByID in React

1 Answers1