CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Yerlan Yeszhanov
Yerlan Yeszhanov

Reputation: 2439

Styled component with react hooks

I'm using hooks with styled component. On click I want to display DropdownContentUI . How to pass prop to UI component from state?

const DropdownContentUI = styled.div`
  display: ${props=>props.isOpen ? 'inline-flex' : 'none'};
  position: absolute;
  background-color: #f9f9f9;
  top: 100%;
  left: 0;
  z-index: 1;
  flex-flow: column;
`;

const DropdownArrows = () => {
  const [isOpen, setTrigger] = useState(false);
  return (
<DropdownArrowsUI onClick={()=> setTrigger(!isOpen)} isOpen>
    <DropdownArrowsWrapperUI>
      <DropdownIconUI width="8" height="11" viewBox="0 0 8 11">
        <path d="M1 4.04L4.04 1L7.08 4.04" stroke="#BACCD8" />
        <path d="M7.08008 6.46L4.04008 9.5L1.00008 6.46" stroke="#BACCD8" />
      </DropdownIconUI>
    </DropdownArrowsWrapperUI>
    <DropdownContentUI>
      <DropdownArrowsWrapperUI>
        <DropdownIconUI width="8" height="7" viewBox="0 0 8 7">
          <path d="M1 4.04L4.04 1L7.08 4.04" stroke="#177FF2" />
          <path d="M4 4V7" stroke="#177FF2" />
        </DropdownIconUI>
      </DropdownArrowsWrapperUI>
    </DropdownContentUI>
  </DropdownArrowsUI>
  );
};

Upvotes: 2

Views: 2985

Answers (2)

Alex
Alex

Reputation: 1849

Alternatively you can use conditional rendering for this case. 

{isOpen && <DropdownContentUI/>}

Upvotes: 2

bkm412
bkm412

Reputation: 1057

<DropdownContentUI isOpen={isOpen}/>

If you just input isOpen, it will be always true

Upvotes: 4

Related Questions