Search code examples
reactjstypescriptemotion

Typescript and Emotion js, conditional props

Basically in my redux store I have a Boolean state, where I go through props to use conditionals when applying css But for some reason mine:

  background: $ {(props: HamburguerProps) => (props.open? 'red': 'pink')};

always stays red even if the state is true or false

TSX:

interface RootState {
  sideBarStatus: boolean;
}

interface SideBar {
  isOpen: boolean;
}

const LogoNavigation: React.FC<SideBar> = ({ isOpen }) => {
  const dispatch = useDispatch();
  return (
    <LogoSide open={isOpen} xd={isOpen ? 'blue' : 'pink'}>
      <img src={Logo} alt="Logo Elo Ghost" />
      <Hamburguer
        open={isOpen}
        onClick={() => dispatch(toggleSide(!isOpen))}
      >
        <div />
        <div />
        <div />
      </Hamburguer>
    </LogoSide>
  );
};
const SideNavigation: React.FC = () => {
  // const { sideIsOpen } = useSelector((RootState) => RootState.toggleSide);
  const selectIsOpen = (state: RootState) => state.sideBarStatus;
  const sideBarStatus = useSelector(selectIsOpen);
  console.log('sideBar', sideBarStatus);
  return (
    <SideNav>
      <LogoNavigation isOpen={sideBarStatus} />
    </SideNav>
  );
};

CSS:

import styled from '@emotion/styled';

type HamburguerProps = {
  open: boolean;
};
export const LogoSide = styled.div<HamburguerProps>`
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  background: ${(props: HamburguerProps) => (props.open ? 'red' : 'pink')};
  img {
    height: 50px;
  }
`;

An example gif where I show my state changing from true to false and yet my style does not change:

enter image description here

example:

https://codesandbox.io/s/great-galileo-zp3e7?file=/src/

Solution

  • isOpen isn't a boolean, it's an object containing sideIsOpen key with a boolean value. An object is always truthy, that's why your background is always red.

    open={isOpen.sideIsOpen}

    or even better - use destructuring with the selector:

    const { sideIsOpen } = useSelector(selectIsOpen);

isOpen={sideIsOpen}