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

Sketch a variety of numerical values in a circular formation

After modifying the template, the ReactDOM.render() function fails to work when called again

Spreading an object to remove a key may result in the returned value being

What is the best way to display a message on the 403 client side when an email sending fails?

incapable of destructuring two objects simultaneously

Using the power of Selenium's XPath, we can easily navigate through a table to access

Stop hyperlinks from automatically opening in a new tab or window

encountering an issue following the initial setup using create-next-app

Is it possible to remove the left margin on an li element by placing a td element inside it using HTML and

Looking for an explanation for the mysterious code in the Button Component MUI - can anyone shed some

Navigate to specific element from bootstrap navigation bar

Exploring TypeScript implementation of Redux toolkit's store

Alpinejs Mega Menu Issue: Hover Functionality Glitchy

The error TS2339 is indicating that there is no property called myProperty on the type SetStateAction<User>

Configuration options for Path Aliases in TypeScript

Issue with big-react-calendar: 'momentLocalizer' property is not defined

Turn off hover opacity effect for a specific image

Adjust the size of a textarea once text is removed

Using Jquery to set up an event listener on a child div that changes the CSS property of its parent div

Rendering React.js components as children of DOM elements