A React component that dynamically increases the padding CSS value to render its children components

Question

A React component that dynamically increases the padding CSS value to render its children components

Greetings! I am working on a scenario where a React component needs to pass a padding value to styled components while incrementing it based on the nested rendering level. For example, imagine a List component that must display a parent and child component with additional padding. I have implemented it as shown below, but I am unsure if the useEffect and useState usage is appropriate in this case. I am concerned about potential side effects. Here is the list component:

const Parent = ({ title, children }) => {
  const [padding, setPadding] = useState(0);
  useEffect(() => {
    setPadding(padding + 20);
  }, []);
  
  return (
    <ListStyle padding={padding}>
      <div className="listItemCategory">{title}</div>
      <div className="wrap">
        <div className="listItem">{children}</div>
      </div>
    </ListStyle>
  );
};

Feel free to check out the codesandbox link for more details HERE

javascript css reactjs styled-components

Answer 1

Answer №1

If you're looking for a solution, consider using useRef and useLayout. useRef alone might be able to address your issue effectively.

import React, { useLayoutEffect, useRef } from 'react';

const Parent = ({ title, children, padding }) => {
  const nestedPadding = padding.current + 20;

  return (
    <ListStyle padding={nestedPadding}>
      <div className="listItemCategory">{title}</div>
      <div className="wrap">
        <div className="listItem">{children}</div>
      </div>
    </ListStyle>
  );
};

const List = () => {
  const padding = useRef(0);

  useLayoutEffect(() => {
    padding.current += 20;
  }, []);

  return (
    <div>
      <Parent title="Parent" padding={padding} />
    </div>
  );
};

On the other hand, I suggest considering useState as it offers a more direct approach. useRef is commonly used for manipulating DOM elements or maintaining values across renders, rather than managing component state.

Answer 2

If you're looking for a solution, consider using useRef and useLayout. useRef alone might be able to address your issue effectively.

import React, { useLayoutEffect, useRef } from 'react';

const Parent = ({ title, children, padding }) => {
  const nestedPadding = padding.current + 20;

  return (
    <ListStyle padding={nestedPadding}>
      <div className="listItemCategory">{title}</div>
      <div className="wrap">
        <div className="listItem">{children}</div>
      </div>
    </ListStyle>
  );
};

const List = () => {
  const padding = useRef(0);

  useLayoutEffect(() => {
    padding.current += 20;
  }, []);

  return (
    <div>
      <Parent title="Parent" padding={padding} />
    </div>
  );
};

On the other hand, I suggest considering useState as it offers a more direct approach. useRef is commonly used for manipulating DOM elements or maintaining values across renders, rather than managing component state.

A React component that dynamically increases the padding CSS value to render its children components

Answer №1

Similar questions

Using jQuery Mobile to manipulate the window location in Chrome can cause unexpected jumping behavior

Unable to load CSS background image and update code

methods for verifying changing row array data in javascript

Error: Unable to run 'play' on 'HTMLMediaElement': Invocation not allowed

Is it possible to apply a tailwind class that fades or transitions into something else after a specific duration?

Press the onClick button to return to the previous page or component in a React application

Encountering a glitch in Jest unit testing post updating to npm version 3.3.12

Extracting the value of an HTML element from a string variable in AngularJS

Block of white colors located on the right side beyond the confines of an HTML structure

The context environment is failing to update the current state

What steps can I take to stop text from disappearing when the screen size decreases and the span is used?

What is the best way to implement a delay for ajax requests triggered by onkeyup events, and then restart the delay countdown each

What is the process for assigning a value to the body in a div element?

A guide to customizing the label color in Material-UI's <TextField/> component

Click to refresh React list

What is the best way to invoke a function within a component class from my App.tsx file?

React JS alterations in circular word cloud

In Protractor, mastering the technique to extract multiple values simultaneously is crucial for efficiently handling applications that receive a large amount of push notifications

Tips for successfully passing props with getAsyncComponent on React Route

Is the space-between property not delivering the desired spacing?