score:0

Accepted answer
const Price = () => {
  function getPriceParts(showYearlyPrice: boolean){
    return showYearlyPrice ? "a" : "b";
  }

  const isToggled = useContext(SwitchContext); 
  const mainPrice = getPriceParts(isToggled);

  return (
    <>
      <div className="flex flex-row">
      <p className="text-grey text-sm">
        {mainPrice}
      </p>
    </>
  );
};

const PricingHeader = ({
  price,
}) => {
 //useContext should NOT be here, I'm not a child of the Context Provider
  return (
      <SubscribableSwitch color={sectionBackground}>
        <Section bg={sectionBackground} spacing={SectionSpacing.BOTTOM_ONLY}>
           <Price price={price}/>
        </Section>
      </SubscribableSwitch>
  );
};

Related Query

More Query from same tag