DEV Community


How to adjust the size of the container based on the contents without repeating same lines of code?

jmjjeena profile image J E E N A R J U N ・1 min read

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 &&
      grid-template-rows: 40px

Discussion (1)

dance2die profile image
Sung M. Kim

Seems it's already answered :)

You just need to define a boolean variable to have a flag if there are attachments or not and then use it to set the extra prop and to render or not the DetailsAttachments component like this:

renderData = () => {
  const attachments = [a, b, c, d, e];
Forem Open with the Forem app