How to create a list by getting the ids of specific elements in React?

Issue

Guys I need your help with an issue. I am recently learning how to use React. The question is this: I have three h2 elements, each with a different id attribute. What I am trying to do is create a list consisting of as many "a" elements as there are h2 elements. Each "a" element should have the href attribute pointing to the respective h2 element.

I show you what I have tried to do. With the code I wrote the list remains blank.

import logo from './logo.svg';
import './App.css';
import { Link } from "react-router-dom";

function App() {
  const h2 = Array.from(document.getElementsByTagName('h2'));
  const list = h2.map(element => {
    return (
      <li key={element.id}>
        <Link to={`${element.id}`}>{element.innerHTML}</Link>
      </li>
    );
  })

  return (
    <div className="App">
      <h2 id="first">First item</h2>
      <h2 id="second">Second item</h2>
      <h2 id="Third">Third item</h2>

      <h4>List of h2:</h4>
      <ul>
        {list}
      </ul>
    </div>
  );
}

export default App;

Could you tell me what I should do or the concepts I should go to study?

Solution

There are two problems in above solution.

• Fetching H2s before they render for the first render.
• Missed appending # before redirection link for ID.

Here's the solution. I have used a tag instead of react-router's Link but it will work in similar pattern.

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [list, setList] = useState([]);

  useEffect(() => {
    // Added this in useEffect as we endup fetching h2s before they render if kept outside. Here they will be fetched post first render
    const h2 = Array.from(document.getElementsByTagName("h2"));
    const currentList = h2.map((element) => {
      return (
        <li key={element.id}>
          <a href={`#${element.id}`}>{element.innerHTML}</a>
        </li>
      );
    });

    setList(currentList);
  }, []);

  return (
    <div className="App">
      <h2 id="first">First item</h2>
      <h2 id="second">Second item</h2>
      <h2 id="Third">Third item</h2>

      <div style={{ height: "100vh" }}>Some space</div>

      <h4>List of h2:</h4>
      <ul>{list}</ul>
    </div>
  );
}

Here's a working example at codesandbox, I have added a large div in the center to make scroll visible. Please scroll down the example.

Answered By - Mehul Thakkar