title: Why is useState returning undefined?
body: <p>I'm attempting to use useState to alter the display type in my styled components. When attempting to use my code the display type is not altered and my variable &quot;displayType&quot; is undefined.</p>
  <p>I've attempted altering what my setStyle() function returns, but I am starting to see this is a larger problem that I'd like to understand better.</p>
  <p>When I print the value to the console in index.js everything works fine. However I just get undefined when I try to use displayType in StoreElements.js</p>
  <p>src/pages/store.js</p>
  <pre><code>
      const [displayType, setDisplayType] = useState(&quot;none&quot;);
  
      const setStyle = (displayType) =&gt; {
        setDisplayType(displayType);
        console.log(displayType)
      };
  
      const [isOpen, setIsOpen] = useState(false)
  
      const toggle = () =&gt; {
          setIsOpen(!isOpen)
      }
  
  
  
  
      return (
          &lt;div&gt;
              &lt;Sidebar isOpen={isOpen} toggle={toggle} /&gt;
              &lt;Navbar toggle={toggle} /&gt;
              &lt;Store setStyle={setStyle} displayType={displayType}&gt;&lt;/Store&gt;
              &lt;Footer /&gt;
          &lt;/div&gt;
      )
  }
   export default StorePage
  
  </code></pre>
  <p>src/store/index.js</p>
  <pre><code>const Store = ({displayType, setStyle}) =&gt; {
    return (
      &lt;&gt;
        &lt;AboutBg style={{ backgroundImage: `url(${BgPic})` }}&gt;&lt;/AboutBg&gt;
        &lt;StoreContainer&gt;
          &lt;StoreWrapper&gt;
            &lt;Title&gt;Store&lt;/Title&gt;
            &lt;ItemsContainer&gt;
              &lt;ItemWrapper
                onMouseEnter={() =&gt; setStyle(&quot;hoodie&quot;)}
                onMouseLeave={() =&gt; setStyle(&quot;none&quot;)}
              &gt;
                &lt;ImgWrapper&gt;
                  &lt;ImgLink to=&quot;/about&quot;&gt;
                    &lt;MerchImg src={frontHoodie}&gt;&lt;/MerchImg&gt;
                  &lt;/ImgLink&gt;
                &lt;/ImgWrapper&gt;
                &lt;TextWrapper&gt;
                  &lt;MerchText&gt;Hoodie text&lt;/MerchText&gt;
                  &lt;HoodiePriceText&gt;price&lt;/HoodiePriceText&gt;
                &lt;/TextWrapper&gt;
              &lt;/ItemWrapper&gt;
              &lt;ItemWrapper
                onMouseEnter={() =&gt; setStyle(&quot;sweats&quot;)}
                onMouseLeave={() =&gt; setStyle(&quot;none&quot;)}
              &gt;
                &lt;ImgWrapper&gt;
                  &lt;ImgLink to=&quot;/tournaments&quot;&gt;
                    &lt;MerchImg src={frontSweats}&gt;&lt;/MerchImg&gt;
                  &lt;/ImgLink&gt;
                &lt;/ImgWrapper&gt;
                &lt;TextWrapper&gt;
                  &lt;MerchText&gt;Sweats text&lt;/MerchText&gt;
                  &lt;SweatsPriceText displayType={displayType}&gt;
                    price
                  &lt;/SweatsPriceText&gt;
                &lt;/TextWrapper&gt;
              &lt;/ItemWrapper&gt;
              &lt;ItemWrapper
                onMouseEnter={() =&gt; setStyle(&quot;shirt&quot;)}
                onMouseLeave={() =&gt; setStyle(&quot;none&quot;)}
              &gt;
                &lt;ImgWrapper&gt;
                  &lt;ImgLink to=&quot;/&quot;&gt;
                    &lt;MerchImg src={frontShirt}&gt;&lt;/MerchImg&gt;
                  &lt;/ImgLink&gt;
                &lt;/ImgWrapper&gt;
                &lt;TextWrapper&gt;
                  &lt;MerchText&gt;Shirt text&lt;/MerchText&gt;
                  &lt;ShirtPriceText&gt;price&lt;/ShirtPriceText&gt;
                &lt;/TextWrapper&gt;
              &lt;/ItemWrapper&gt;
              &lt;ItemWrapper
                onMouseEnter={() =&gt; setStyle(&quot;mousepad&quot;)}
                onMouseLeave={() =&gt; setStyle(&quot;none&quot;)}
              &gt;
                &lt;ImgWrapper&gt;
                  &lt;ImgLink to=&quot;/&quot;&gt;
                    &lt;MerchImg src={mousepadFront}&gt;&lt;/MerchImg&gt;
                  &lt;/ImgLink&gt;
                &lt;/ImgWrapper&gt;
                &lt;TextWrapper&gt;
                  &lt;MerchText&gt;mouspad text&lt;/MerchText&gt;
                  &lt;MousepadPriceText&gt;price&lt;/MousepadPriceText&gt;
                &lt;/TextWrapper&gt;
              &lt;/ItemWrapper&gt;
            &lt;/ItemsContainer&gt;
          &lt;/StoreWrapper&gt;
        &lt;/StoreContainer&gt;
        &lt;div&gt;
          {listItems}
          {cartItems}
          Total: ${cartTotal}
          {cartItems.length}
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default Store;
  </code></pre>
  <p>src/store/StoreElements.js</p>
  <pre><code>export const HoodiePriceText = styled.h4`
    color: red;
    position: absolute;
    top: 365px;
    transition: 0.8s all ease;
  
    display: ${({ displayType }) =&gt; {
      if (displayType === &quot;hoodie&quot;) {
        console.log(&quot;working&quot;);
        return &quot;block&quot;;
      } else {
        console.log({displayType})  
        return &quot;none&quot;;
      }
    }};
  `;
  
  export const ShirtPriceText = styled.h4`
    color: red;
    position: absolute;
    top: 365px;
    transition: 0.8s all ease;
  `;
  
  export const MousepadPriceText = styled.h4`
    color: red;
    position: absolute;
    top: 365px;
    transition: 0.8s all ease;
  `;
  
  export const SweatsPriceText = styled.h4`
    color: red;
    position: absolute;
    top: 365px;
    transition: 0.8s all ease;
  `;
  </code></pre>