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