clientHeight in React

How to recreate same code in React? To be able to have scrollbar when more data is added to the table? JS code:

const containerElement = document.querySelector("div");
const tbodyElement = document.querySelector(".table tbody"); //container's second child
const sectionElement = document.querySelector("section"); //container's first child
const navElement = document.querySelector("nav"); //container's sibling

function updateTbodyHeight() {
  tbodyElement.style.height = containerElement.clientHeight - (sectionElement.clientHeight + navElement.clientHeight) - tbodyElement.offsetTop + "px";
}


updateTbodyHeight();
window.addEventListener("resize", updateTbodyHeight);

const containerElement = document.querySelector("div");
const tbodyElement = document.querySelector(".table tbody"); //container's second child
const sectionElement = document.querySelector("section"); //container's first child
const navElement = document.querySelector("nav"); //container's sibling

function updateTbodyHeight() {
  tbodyElement.style.height = containerElement.clientHeight - (sectionElement.clientHeight + navElement.clientHeight) - tbodyElement.offsetTop + "px";
}


updateTbodyHeight();
window.addEventListener("resize", updateTbodyHeight);

I tried using ref, but after page refresh table's tbody just dissapears or overflow is not working and height is just expanding.

3 Replies

Como•8mo ago

Here is react code:

const [tbodyHeight, setTbodyHeight] = useState();
const [containerHeight, setContainerHeight] = useState();
const [navHeight, setNavHeight] = useState();
const [sectionHeight, setSectionHeight] = useState();


const navRef = useRef(null);
const containerRef = useRef(null);
const sectionRef = useRef(null);
const tbodyRef = useRef(null);

useLayoutEffect(() => {
     setNavHeight(navRef.current.clientHeight);
     setcontainerHeight(containerRef.current.clientHeight);
     setSectionHeight(sectionRef.current.clientHeight);
     setTbodyHeight(tbodyRef.current.clientHeightHeight);

     const newTbodyHeight = `${containerHeight - (navHeight + sectionHeight)}px`;

     setTbodyHeight(newTbodyHeight);
     console.log(tbodyHeight)
    }, []);

const [tbodyHeight, setTbodyHeight] = useState();
const [containerHeight, setContainerHeight] = useState();
const [navHeight, setNavHeight] = useState();
const [sectionHeight, setSectionHeight] = useState();


const navRef = useRef(null);
const containerRef = useRef(null);
const sectionRef = useRef(null);
const tbodyRef = useRef(null);

useLayoutEffect(() => {
     setNavHeight(navRef.current.clientHeight);
     setcontainerHeight(containerRef.current.clientHeight);
     setSectionHeight(sectionRef.current.clientHeight);
     setTbodyHeight(tbodyRef.current.clientHeightHeight);

     const newTbodyHeight = `${containerHeight - (navHeight + sectionHeight)}px`;

     setTbodyHeight(newTbodyHeight);
     console.log(tbodyHeight)
    }, []);

Como•8mo ago

This is how it looks like with react code:

Como•8mo ago

This is how i want it to behave (WITH A SCROLLBAR!):

Gaming

Programming

clientHeight in React