title: Styled component with react hooks
body: <p>I'm using hooks with styled component. On click I want to display <code>DropdownContentUI</code> . How to pass prop to UI component  from state?</p>
  
  <pre><code>const DropdownContentUI = styled.div`
    display: ${props=&gt;props.isOpen ? 'inline-flex' : 'none'};
    position: absolute;
    background-color: #f9f9f9;
    top: 100%;
    left: 0;
    z-index: 1;
    flex-flow: column;
  `;
  
  const DropdownArrows = () =&gt; {
    const [isOpen, setTrigger] = useState(false);
    return (
  &lt;DropdownArrowsUI onClick={()=&gt; setTrigger(!isOpen)} isOpen&gt;
      &lt;DropdownArrowsWrapperUI&gt;
        &lt;DropdownIconUI width="8" height="11" viewBox="0 0 8 11"&gt;
          &lt;path d="M1 4.04L4.04 1L7.08 4.04" stroke="#BACCD8" /&gt;
          &lt;path d="M7.08008 6.46L4.04008 9.5L1.00008 6.46" stroke="#BACCD8" /&gt;
        &lt;/DropdownIconUI&gt;
      &lt;/DropdownArrowsWrapperUI&gt;
      &lt;DropdownContentUI&gt;
        &lt;DropdownArrowsWrapperUI&gt;
          &lt;DropdownIconUI width="8" height="7" viewBox="0 0 8 7"&gt;
            &lt;path d="M1 4.04L4.04 1L7.08 4.04" stroke="#177FF2" /&gt;
            &lt;path d="M4 4V7" stroke="#177FF2" /&gt;
          &lt;/DropdownIconUI&gt;
        &lt;/DropdownArrowsWrapperUI&gt;
      &lt;/DropdownContentUI&gt;
    &lt;/DropdownArrowsUI&gt;
    );
  };
  </code></pre>