Setting custom user attributes from a React component with useCroct
In an onboarding step the user picks their interests and I want to write those onto the profile so later audiences can target them. I already have the values in my submit handler, I just need to get the plug instance inside the component and save them.
What is the right hook for that and how do I write the attributes
2 answers
Use the useCroct hook. It returns the plug instance, which gives you the imperative API inside a component:
import {useCroct} from '@croct/plug-react';
function InterestsStep() { const croct = useCroct();
async function handleSubmit(expertise: string) { await croct.user.edit() .set('custom.expertise', expertise) .save(); } // ...}Custom attributes are written under the custom. prefix, so custom.expertise here. One thing to remember for the audience side: in CQL those custom attributes are referenced without the custom. prefix, so the condition reads user's expertise is "...". That write-versus-read mismatch is a common reason an audience never matches.
See the useCroct hook and editing the user profile for the full attribute reference.
Just to underline the prefix point for anyone skimming: you write custom.expertise but you query user's expertise. We lost an afternoon to an audience that estimated zero matches because the read side still had the custom. on it. Once we dropped the prefix in CQL it started matching.