Can you control the order of rendering for specific divs in a ReactJS application?

Question

Can you control the order of rendering for specific divs in a ReactJS application?

I need assistance with developing a mobile app using ReactJS and react bootstrap that can dynamically resize itself based on the screen size. One specific part of the app requires calculations to determine its dimensions based on the remaining space on the screen after other elements have been rendered.

Here is an example scenario:

var calcWidth = (100 / tableSize).toString() + '%';
return( 
<Container>
    <Row id='1'>Header and other static components here</Row>
    <Row id='2'>
        //A database-driven table with square shaped cells is included here, structured as follows -
        <Container style={{width:'100%'}}>
            <Row><Col style={{width:calcWidth, paddingBottom:calcWidth}}></Col>...</Row>
            ...
        </Container>
    </Row>
    <Row id='3'>Footer and other static components here</Row>
</Container>
);

In the code snippet above, Row 1 and Row 3 contain fixed content such as headers, footers, buttons, etc. Row 2 consists of a table with square cells that need to be centered both horizontally and vertically.

The current implementation calculates the width of each cell based on the container's width effectively creating square cells that fit perfectly horizontally. However, since the height matches the width, it causes the footer element to extend beyond the screen leading to scrollbars appearing. To avoid this issue, the width calculation should be adjusted based on the available height for the table, like so -

var remainingHeight = <total height of the container> - <height taken up by Row 1> - <height taken up by Row 3>
var width = <width of the screen>
var calcWidth = ((remainingHeight < width ? remainingHeight : width) / tableSize).toString() + '%';

My queries are as follows:

How can I determine the value of the remainingHeight variable? Is there a way to ensure Row 1 and Row 3 render before calculating the remaining height for Row 2?
What method can be used to ascertain the total height and width of the container?
Are there any alternative approaches or CSS techniques that could simplify this process? As a beginner, I'm open to suggestions for more efficient solutions.

css reactjs react-bootstrap

Answer 1

Answer №1

Check out this example showcasing how to dynamically calculate the height of React components:

https://i.stack.imgur.com/UgFiP.png

export default function App() {
  const [height1, setHeigt1] = useState(0);
  const [height2, setHeight2] = useState(0);
  const [height3, setHeight3] = useState(0);
  const [remainingHeight, setRemainingHeight] = useState(0);

  useEffect(() => {
    const remainingHeight = 100 - height1 - height2 - height3;
    console.log(remainingHeight);
    setRemainingHeight(remainingHeight);
  }, [setRemainingHeight, height1, height2, height3]);

  return (
    <div
      id="container"
      style={{
        height: "100px",
        backgroundColor: "firebrick",
        padding: "15px"
      }}
    >
      <ResizableComponent
        id="component-1"
        content={`Initial component 1 height = ${height1}`}
        onHeightUpdated={setHeigt1}
      />
      <ResizableComponent
        id="component-2"
        content={`Initial component 2 height = ${height2}`}
        onHeightUpdated={setHeight2}
      />
      <ResizableComponent
        id="component-3"
        content={`Initial component 3 height = ${height3}`}
        onHeightUpdated={setHeight3}
        remainingHeight={remainingHeight}
      />
    </div>
  );
}

export function ResizableComponent({
  id,
  content,
  onHeightUpdated,
  remainingHeight
}) {
  const [height, setHeight] = useState(0);
  const [isFirstRender, setIsFirstRender] = useState(true);

  useEffect(() => {
    const newHeight = document.getElementById(id).clientHeight;
    if (height !== newHeight && isFirstRender) {
      setHeight(newHeight);
      setIsFirstRender(false);
    }
  }, [isFirstRender, id, height, onHeightUpdated, remainingHeight]);

  useEffect(() => {
    onHeightUpdated(height);
  }, [height, onHeightUpdated]);

  return (
    <div
      id={id}
      style={
        remainingHeight
          ? {
              backgroundColor: "pink",
              height: `calc(${height}px + ${remainingHeight}px)`
            }
          : { backgroundColor: "pink" }
      }
    >
      {content}
    </div>
  );
}

Answer 2

Check out this example showcasing how to dynamically calculate the height of React components:

https://i.stack.imgur.com/UgFiP.png

export default function App() {
  const [height1, setHeigt1] = useState(0);
  const [height2, setHeight2] = useState(0);
  const [height3, setHeight3] = useState(0);
  const [remainingHeight, setRemainingHeight] = useState(0);

  useEffect(() => {
    const remainingHeight = 100 - height1 - height2 - height3;
    console.log(remainingHeight);
    setRemainingHeight(remainingHeight);
  }, [setRemainingHeight, height1, height2, height3]);

  return (
    <div
      id="container"
      style={{
        height: "100px",
        backgroundColor: "firebrick",
        padding: "15px"
      }}
    >
      <ResizableComponent
        id="component-1"
        content={`Initial component 1 height = ${height1}`}
        onHeightUpdated={setHeigt1}
      />
      <ResizableComponent
        id="component-2"
        content={`Initial component 2 height = ${height2}`}
        onHeightUpdated={setHeight2}
      />
      <ResizableComponent
        id="component-3"
        content={`Initial component 3 height = ${height3}`}
        onHeightUpdated={setHeight3}
        remainingHeight={remainingHeight}
      />
    </div>
  );
}

export function ResizableComponent({
  id,
  content,
  onHeightUpdated,
  remainingHeight
}) {
  const [height, setHeight] = useState(0);
  const [isFirstRender, setIsFirstRender] = useState(true);

  useEffect(() => {
    const newHeight = document.getElementById(id).clientHeight;
    if (height !== newHeight && isFirstRender) {
      setHeight(newHeight);
      setIsFirstRender(false);
    }
  }, [isFirstRender, id, height, onHeightUpdated, remainingHeight]);

  useEffect(() => {
    onHeightUpdated(height);
  }, [height, onHeightUpdated]);

  return (
    <div
      id={id}
      style={
        remainingHeight
          ? {
              backgroundColor: "pink",
              height: `calc(${height}px + ${remainingHeight}px)`
            }
          : { backgroundColor: "pink" }
      }
    >
      {content}
    </div>
  );
}

Can you control the order of rendering for specific divs in a ReactJS application?

Answer №1

Similar questions

Instructions on obtaining a distinct daily array from the weather API array that provides a detailed 5-day weather report every 3 hours

Adjust link when scrolling through the webpage

Generate a fresh line within the source code

What is the best way to superimpose text on a variety of images with varying sizes using CSS

react-Draggable DnD: Experience a beautiful way to effortlessly drag and drop items within a container, where the

The paragraph element is refusing to align with the next paragraph element on the following line

When an SVG image is embedded, its color may not change even after being converted to an inline SVG

Is there a method to change the name of a file and have it automatically updated in all other locations where it is referenced?

Tips for connecting a Django API project with a nodejs and react frontend

Move the DIV element to a static section within the DOM

Leverage URL parameters as a prop within a React component

We were unable to identify any Next.js version in your project. Please ensure that the `"next"` package is installed in either the "dependencies" or "devDependencies" section

Accessing the host in NextJS using _document.js or _app.js

Forming triangles with outlines

Setting initial opacity for CSS on page load

Guide on setting up Material UI with the latest experimental `app/` directory in Next.js

Utilizing React.hydrate in conjunction with Vue: A Beginner's Guide

What is the most effective method for structuring JSON data that is utilized by a single-page application (SPA)?

Is there a combination of 'auto' and 'none' values in any CSS properties?

The hierarchy of CSS in Vue components