'getComputedStyle' does not recognize element

16 Views Asked by At

In my React app, I'm trying to use getComputedStyle and getPropertyValue for my component, but it fails to execute because it doesn't seem to recognize my element. I get TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element

const [dashboardToggle, setDashboardToggle] = useState(false);

  const boardElement = document.getElementsByClassName("dashboard");
  const boardPosition = window
    .getComputedStyle(boardElement[0])
    .getPropertyValue("position");
    

  console.log("this" + boardElement);
  console.log("this" + boardPosition);

return (<div className="App"><AnimatePresence>
        {dashboardToggle && (
          <Dashboard
            className="dashboard"
            dashboardToggle={dashboardToggle}
          ></Dashboard>
        )}
      </AnimatePresence>)
    </div>

When I console log boardElement, I get [object HTMLCollection]. I assume boardElement[0] should be an element param for getComputedStyle.

What seems to be the problem here?

0

There are 0 best solutions below