How to pass data from one page into another using twin.macro - reactjs

Question

I a bit new to react but trying to pass data from one page into another.
Page A:
const PlanAction = tw.div`px-4 sm:px-8 xl:px-16 py-8`;
const BuyNowButton = styled(PrimaryButtonBase)`
${tw`rounded-full uppercase tracking-wider py-4 w-full text-sm hover:shadow-xl transform hocus:translate-x-px hocus:-translate-y-px focus:shadow-outline`}
`;
...
<PlanAction state={plan}>
<BuyNowButton
css={!plan.featured && highlightGradientsCss[index]}
as="a"
href="/payment"
state={plan}
>
{primaryButtonText}
</BuyNowButton>
</PlanAction>
Page B:
const location = useLocation();
I used location but only pathname is present, the state is undefined. I tried for couple of hours but don't understand why the data is not pass in other page. Thank you
edit Full code:
<Container>
<ContentWithPaddingXl>
<HeaderContainer>
{subheading && <Subheading>{subheading}</Subheading>}
<Heading>{heading}</Heading>
{description && <Description>{description}</Description>}
</HeaderContainer>
<PlansContainer>
{(plans|| []).map((plan, index) => (
<Plan key={index} featured={plan.featured}>
{!plan.featured && <div className="planHighlight" css={highlightGradientsCss[index % highlightGradientsCss.length]} />}
<PlanHeader>
<span className="name">{plan.product_name}</span>
<span className="price">$ {plan.price}</span>
<span className="duration">{plan.duration}</span>
</PlanHeader>
<PlanFeatures>
<span className="feature mainFeature">{plan.main_feature}</span>
{Object.values(plan.features_representation).map((feature, index) => (
<span key={index} className="feature">
{feature}
</span>
))}
</PlanFeatures>
<PlanAction state={plan}>
<BuyNowButton css={!plan.featured && highlightGradientsCss[index]}
as="a" href="/payment" state={"test"}
>
{primaryButtonText}
</BuyNowButton>
</PlanAction>
</Plan>
))}
<DecoratorBlob/>
</PlansContainer>
</ContentWithPaddingXl>
</Container>

Answer 1

You need to use a react-router link to pass a state, you could style a react-router link instead of a tw.button, maybe create something like a PrimaryButtonLink
import { Link } from "react-router-dom";
import styled from 'styled-components';
export const PrimaryButtonLink = styled(Link)`
${tw`px-8 py-3 font-bold rounded bg-primary-500 text-gray-100 hocus:bg-primary-700 hocus:text-gray-200 focus:shadow-outline focus:outline-none transition duration-300`}
`;
Also, note that the Link component receives a to prop, not a href
const BuyNowButton = styled(PrimaryButtonLink)`
${tw`rounded-full uppercase tracking-wider py-4 w-full text-sm hover:shadow-xl transform hocus:translate-x-px hocus:-translate-y-px focus:shadow-outline`}
`;
...
<BuyNowButton
css={!plan.featured && highlightGradientsCss[index]}
to={{
pathname:"/payment",
state: "test", // not sure if state can be a string, try an object if it doesn't work
}}
>
{primaryButtonText}
</BuyNowButton>;