I have few components rendered on based on certain conditions because of which the parent container sizing has to change.
export const Container = styled.div`
display: grid;
font-family: Nunito Sans;
padding: 32px 40px 80px 80px;
background-color: transparent;
grid-template-columns: 980px;
grid-template-rows: 40px minmax(64px, max-content);
${props =>
props.extra &&
css`
grid-template-rows: 40px min-content minmax(64px, max-content);
`};
grid-row-gap: 16px;
`;
I am adding the prop extra
so that the sizing of the container changes based on the addition of the components.
renderData = () => {
const attachments = [a, b, c, d, e];
if ( attachments.length > 0 ) {
return (
<Container extra>
<DetailsHeader />
<DetailsAttachments attachments={attachments} />
<DetailsMisc />
</Container>
)
}
return (
<Container>
<DetailsHeader />
<DetailsMisc />
</Container>
)
};
So in the above code most of the line of code is repeating.
Basically if there is items in the array of attachments only show the component DetailsAttachments
else show the normal container with 2 components.