How do I pass my own variables into a slot with useContent in React?
the content a slot returns needs to depend on a value my component already has, like the plan tier or a category. I would rather feed that straight into the fetch than round-trip through a profile write first.
Small example of what I have:
const content = useContent('pricing-hero'); // want this to depend on `tier`How do I pass tier in so the audience that picks the content can see it?
2 answers
In React the attributes go at the top level of the options object, and they become available to the CQL that decides the content for that fetch:
const content = useContent('pricing-hero', { attributes: {tier: 'pro', category: 'analytics'}, fallback: {title: 'Plans for every team'},});One thing that trips people up: this differs from the Next server helper. In fetchContent on the server you nest them under context.attributes, whereas the React hook takes attributes at the top level. Same idea, different shape.
Adding one gotcha since you will hit it: custom attributes are written with the custom. prefix but referenced without it in CQL. So if you pass attributes: {tier: 'pro'} and set it on the profile as custom.tier, the audience condition reads user's tier is "pro", no prefix. Getting that backwards is why an audience silently never matches.
top-level attributes did it, content changes with the tier now. thanks both.