Render one of the component that has inside another component according to state

Question

I'm facing an issue of rendering components following a condition. Both of the components have inside the exact component that should be rendered but not displayed. Both of them are styled with Styled Components.

In my example, I want to display one component when clicking on the other component (footer). Currently, I have this working:

    <footer className={cx(styles.footer, { [styles.hideFooter]: hide })}>
        <StyledAboutContainer>
          <About />
        </StyledAboutContainer>
    </footer>

And I want to transform it into a Styled component way and I struggle. I've tried to do this:

     <StyledFooterContainer hide={false}>
        {hide ? StyledHideFooter : StyledFooter}
        <StyledAboutContainer>
          <About />
        </StyledAboutContainer>
    </footer>

The CSS of them are:

export const StyledFooterContainer = styled.div`
 max-height: 0;
`;

export const StyledFooter = styled.footer`
 background: #EFF0F4;
 color: #6782A4;
 display: flex;
 flex-flow: column nowrap;
 flex-grow: 1;
 max-height: 150px;
 font-size: 10pt;
 transition: .7s ease;
`;

export const StyledHideFooter = styled.div`
 max-height: 0;
`;

Thanks.

Answer 1

You want to determine which footer component to use before the return statement:

const MyComponent = () => {
  // Determine the footer component to use
  const FooterComponent = hide ? StyledHideFooter : StyledFooter;

  // Render FooterComponent
  return (
    <StyledFooterContainer>
      <FooterComponent>
        <StyledAboutContainer>
          <About />
        </StyledAboutContainer>
      </FooterComponent>
    </StyledFooterContainer>
  );
};

Components are just variables, so you can store them as such.