Skip to content
loading...

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 twitter logo ・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 &&
    css`
      grid-template-rows: 40px
twitter logo DISCUSS (1)
Discussion
markdown guide
 

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];
Classic DEV Post from Aug 13 '19

How open-source will Tumblr become?

In case you hadn't read the news, Verizon sold Tumblr to Automattic. Verizon owned Tumblr after it ac...

J E E N A R J U N profile image
Fashion Management graduate to Software Engineer!