I am trying to add and remove rows and columns, with the corresponding sizees of the elements added within them. It works for the most part, however, when I first open the application instead of giving me the sizes of the elements, i.e 100px x 300px , it gives me undefinedpx x undefinedpx . After a minute or two of me saving my code it’ll change into the desired sizes I want, but initially it gives me undefined. Typescript is telling me that the div element I am referencing to is either of type Element | null , however this is not suited for resizeObserver.observe(div!);, because it’s type is just Element, unless I put it in an if else statement, but still I dont know what to do with that undefined value and why the measurements are showing up delayed.
import Burger from "./icons/Burger";
import { useState, useEffect, useRef } from "react";
import "./App.scss";
const App = (): JSX.Element => {
const [rows, setRows] = useState<number>(0);
const [columns, setColumns] = useState<number>(0);
const [sidebar, setSidebar] = useState<boolean>(true);
const [height, setHeight] = useState<number>();
const [width, setWidth] = useState<number>();
const elementRef = useRef(null);
useEffect(() => {
const div = document.querySelector(".viewport");
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
setHeight(Math.ceil(entry.contentRect.width));
setWidth(Math.ceil(entry.contentRect.height));
}
});
if (!div) {
return;
} else {
resizeObserver.observe(div!);
}
}, [height, width]);
const handleRowCount = (int: number) => {
setRows(int);
};
const handleColumnCount = (int: number) => {
setColumns(int);
};
const handleSidebar = (boolean: boolean) => {
setSidebar(boolean);
};
let totalBoxes = Array.from({ length: rows * columns });
let boxesArr = Object.keys(totalBoxes);
return (
<div className="app-container">
<Burger
rowCount={handleRowCount}
columnCount={handleColumnCount}
sidebarState={handleSidebar}
/>
<div
id="grid"
style={{
gridTemplateColumns: `repeat(${columns}, 1fr)`,
width: sidebar ? "calc(100vw - 100px)" : "calc(100vw - 200px)",
}}
>
{boxesArr.map((_, index) => (
<div key={index} className="viewport" ref={elementRef}>
{`${height}px x ${width}px`}
</div>
))}
</div>
</div>
);
};
export default App;