title: Can I toggle styled component props based on onClick event?
body: <p>I have two boxes stack on each other in a vertical position, and I have a button in the middle, I want to click on the button, the upper box moves up and the bottom one moves down, after I click the button, they move back.</p>
  <p>I use the useState hook to set the Boolean number and attach it to the OnClick event handleClick function. Now when you click the button, you can switch true and false. I want to use that to toggle on and off the props which I send to my styled component. Is that possible?</p>
  <p>I only figure out useRef hook could help me get the DOM element, So when I click on the button, I can get the styled component element, but I don't know how to access the props I sent to my styled component, And also attach it to my Boolean.</p>
  <pre><code>import React,{ useRef, useState} from &quot;react&quot;;
  import styled,{css, keyframes} from &quot;styled-components&quot;;
  
  const SkillCardContainer = styled.div`
          position:relative;
          width:300px;
          height:450px;
          background:blue;
          margin:200px auto;
      `;
  
      const moveUp = keyframes`
         from{ top: 0;}
         to{ top: -50%}
      `;
      const moveDown = keyframes`
          from { top: 50;}
          to {top: 100%;}
      `;
  
      const UpPart = styled.div`
          position:absolute;
          width:300px;
          height:225px;
          background:red;
          box-sizing:border-box;
          top:0
          left:0;
          z-index:80;
          ${props =&gt; props.showUp ? css`animation: ${moveUp} 1s linear;`:css`animation:none` };
      `;
      const DownPart = styled.div`
          position:absolute;
          width:300px;
          height:225px;
          background:green;
          box-sizing:border-box;
          top:50%;
          left:0;
          z-index:80;
          ${props =&gt; props.showDown ? css`animation:${moveDown} 1s linear;`:css`animation:none`};
      `;
       
      const Button = styled.button`
          width:100px;
          height:50px;
          box-sizing:border-box;
          background:grey;
          position:absolute;
          top:50%;
          left:50%;
          transform: translate(-50%, -50%);
          z-index:100;
      
      `;
  
  
  
      const SkillCard = () =&gt; {
          
          const myRef = useRef(null);
          const [isClick, setIsClick] = useState(false);
  
          const handleClick = () =&gt;{
              setIsClick(!isClick);
          };
          
      return (  
              &lt;React.Fragment&gt;
                  &lt;SkillCardContainer&gt;
                          &lt;UpPart showUp ref={myRef} &gt;&lt;/UpPart&gt;
                             &lt;Button onClick={handleClick}&gt;HTML&lt;/Button&gt;
                          &lt;DownPart showDown&gt;&lt;/DownPart&gt;
                  &lt;/SkillCardContainer&gt;
              &lt;/React.Fragment&gt;
          );
      }
      export default SkillCard;
  </code></pre>