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

Mar 3 '20 Comments: 1 Answers: 1

2

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

…

Open Full Question

Comments

[Sung M. Kim]

Seems it's already answered :)

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

Mar 3 '20

2

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];

…

Open Full Answer