PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, November 9, 2022

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

 November 09, 2022     dom, html, javascript, jsx, reactjs     No comments   

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
Answer Checked By - Robin (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing