Is there reason bracket operators [] might not work with getElementsByClassName() within a react component?

Question

I'm building a small react app containing a list of many programming languages with courses. Each list element will contain a background image provided by one "sprite" png image of their corresponding logo. Instead of giving each div an id to then add a background image and set the position of the image, I gave all of them the class languages for which I will set the background url() quickly then position after.

I've tried to directly set the languages class's background url from my external style-sheet but the link wont reach my public/images folder for some reason when It gets built with webpack. I've decided to settle with linking it with my component file instead.

The issue I'm coming across is when I try to set const languageElements = document.getElementsByClassName("languages");

When calling console.log(languageElements), I see that it returns an HTMLCollection[] array for which I can see my elements clearly.

However, when I call console.log(languageElements[0]) it surprisingly returns undefined.

Am I missing something here? Does this something that has to do with react?

import React, { Component } from "react";
import "../styles/Center.scss";

class Center extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("Center Mounted Successfully.");
  }

  render() {
    const languageElements = document.getElementsByClassName("languages");
    console.log(languageElements);
    languageElements[0].style.background = "url(../images/full-languages.png)";

    return (
      <>
        <section>
          <ul>
            <li>
              CS1022: <span className="languages cpp" />
            </li>
            <li>
              CS1030:
              <span className="languages c" />
              <span className="languages cpp" />
            </li>
            <li>
              CS1410:
              <span className="languages html" />
              <span className="languages css" />
              <span className="languages js" />
            </li>
            <li>
              CS2350: <span className="languages java" />
            </li>
            <li>
              CS2420: <span className="languages java" />
            </li>
            <li>
              CS2550: <span className="languages sql" />
            </li>
          </ul>
        </section>
      </>
    );
  }
}
export default Center;

I expect the use of the bracket operators to allow me to access each element within the HTMLCollection[] getElementsById() returns.

When the thing first renders, are there any elements on the page with that class? — Pointy, Apr 02 '19 at 05:01
because your array is empty on index [0],so its giving undefined — Kishan Jaiswal, Apr 02 '19 at 05:01
Also what is `<>` and `>` supposed to do? (Maybe that's a React thing.) — Pointy, Apr 02 '19 at 05:02
@Pointy when it renders, this list shows on the page. Also when console.log(languageElements) it does show a full array of 9 elements — Subtora, Apr 02 '19 at 05:05
@Pointy also I really could just leave the ```<>``` and ```>``` out for now since it is already wrapped within a section, I usually have those in all my components so I remember where the component ends if it gets long — Subtora, Apr 02 '19 at 05:08
You cannot rely on `console.log(languageElements)` as the console only [loads contents later](https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays). Do `console.log(languageElements.length)` to have accurate information *at the time of logging*. You'll see it really is empty at that time. — trincot, Apr 02 '19 at 05:10

score 1 · Accepted Answer · answered Apr 02 '19 at 05:07

You should learn about React Component Lifecycle at https://reactjs.org/docs/react-component.html

const languageElements = document.getElementsByClassName("languages");

This selector happened inside render() method, while nothing rendered, so languageElements will get empty. Try to put your code at componentDidMount()

Is there reason bracket operators [] might not work with getElementsByClassName() within a react component?

1 Answers1