Why is useState returning undefined?

Question

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 "displayType" is undefined.

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.

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

src/pages/store.js

    const [displayType, setDisplayType] = useState("none");

    const setStyle = (displayType) => {
      setDisplayType(displayType);
      console.log(displayType)
    };

    const [isOpen, setIsOpen] = useState(false)

    const toggle = () => {
        setIsOpen(!isOpen)
    }




    return (
        <div>
            <Sidebar isOpen={isOpen} toggle={toggle} />
            <Navbar toggle={toggle} />
            <Store setStyle={setStyle} displayType={displayType}></Store>
            <Footer />
        </div>
    )
}
 export default StorePage

src/store/index.js

const Store = ({displayType, setStyle}) => {
  return (
    <>
      <AboutBg style={{ backgroundImage: `url(${BgPic})` }}></AboutBg>
      <StoreContainer>
        <StoreWrapper>
          <Title>Store</Title>
          <ItemsContainer>
            <ItemWrapper
              onMouseEnter={() => setStyle("hoodie")}
              onMouseLeave={() => setStyle("none")}
            >
              <ImgWrapper>
                <ImgLink to="/about">
                  <MerchImg src={frontHoodie}></MerchImg>
                </ImgLink>
              </ImgWrapper>
              <TextWrapper>
                <MerchText>Hoodie text</MerchText>
                <HoodiePriceText>price</HoodiePriceText>
              </TextWrapper>
            </ItemWrapper>
            <ItemWrapper
              onMouseEnter={() => setStyle("sweats")}
              onMouseLeave={() => setStyle("none")}
            >
              <ImgWrapper>
                <ImgLink to="/tournaments">
                  <MerchImg src={frontSweats}></MerchImg>
                </ImgLink>
              </ImgWrapper>
              <TextWrapper>
                <MerchText>Sweats text</MerchText>
                <SweatsPriceText displayType={displayType}>
                  price
                </SweatsPriceText>
              </TextWrapper>
            </ItemWrapper>
            <ItemWrapper
              onMouseEnter={() => setStyle("shirt")}
              onMouseLeave={() => setStyle("none")}
            >
              <ImgWrapper>
                <ImgLink to="/">
                  <MerchImg src={frontShirt}></MerchImg>
                </ImgLink>
              </ImgWrapper>
              <TextWrapper>
                <MerchText>Shirt text</MerchText>
                <ShirtPriceText>price</ShirtPriceText>
              </TextWrapper>
            </ItemWrapper>
            <ItemWrapper
              onMouseEnter={() => setStyle("mousepad")}
              onMouseLeave={() => setStyle("none")}
            >
              <ImgWrapper>
                <ImgLink to="/">
                  <MerchImg src={mousepadFront}></MerchImg>
                </ImgLink>
              </ImgWrapper>
              <TextWrapper>
                <MerchText>mouspad text</MerchText>
                <MousepadPriceText>price</MousepadPriceText>
              </TextWrapper>
            </ItemWrapper>
          </ItemsContainer>
        </StoreWrapper>
      </StoreContainer>
      <div>
        {listItems}
        {cartItems}
        Total: ${cartTotal}
        {cartItems.length}
      </div>
    </>
  );
};

export default Store;

src/store/StoreElements.js

export const HoodiePriceText = styled.h4`
  color: red;
  position: absolute;
  top: 365px;
  transition: 0.8s all ease;

  display: ${({ displayType }) => {
    if (displayType === "hoodie") {
      console.log("working");
      return "block";
    } else {
      console.log({displayType})  
      return "none";
    }
  }};
`;

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;
`;

Answer 1

In your styled component usage, you should bind the property displayType :

<HoodiePriceText displayType={displayType}>price</HoodiePriceText>

Thus, you should able get displayType in styled component!

Answer 2

setDisplayType is triggering the state change and causes a re-render of the function. It does not modify the value of the variable displayType . The value displayType is still undefined directly after calling setDisplayType , because it only gets its value after the function re-runs the useState-line.

const [displayType, setDisplayType] = useState("none");
// displayType can only get a new value here