Skip to main content

I’m using the CollaboratorToken component:




but getting an issue. This works:


<React.Fragment>
{base.activeCollaborators.map(choice => (
<div>
<p>{choice.id}</p>
<p>{choice.name}</p>
<p>{choice.email}</p>
</div>
))}
</React.Fragment>

but the code in the docs is giving me an error:


<React.Fragment>
{base.activeCollaborators.map(choice => (
<CollaboratorToken
key={choice.id}
choice={choice}
marginRight={1}
/>
))}
</React.Fragment>


Any pointers on this one? I’m importing CollaboratorToken, useBase so think all is good there.


Thanks!

If you look closely at the sample code, the key assignment uses collaborator.id instead of choice.id. That should work, even though I can’t tell where collaborator is being defined. Perhaps there’s some magic going on in the <CollaboratorToken> component.


Yeah, I should have said, this doesn’t work for me either unfortunately


Sorry, there’s a typo in the example in the documentation. The prop to the CollaboratorToken component should be collaborator, not choice:


import { CollaboratorToken, useBase } from "@airtable/blocks/ui";
const CollaboratorTokenExample = () => {
const base = useBase();
return (
<React.Fragment>
{base.activeCollaborators.map(collaborator => (
<CollaboratorToken
key={collaborator.id}
collaborator={collaborator}
marginRight={1}
/>
))}
</React.Fragment>
);
};

Sorry, there’s a typo in the example in the documentation. The prop to the CollaboratorToken component should be collaborator, not choice:


import { CollaboratorToken, useBase } from "@airtable/blocks/ui";
const CollaboratorTokenExample = () => {
const base = useBase();
return (
<React.Fragment>
{base.activeCollaborators.map(collaborator => (
<CollaboratorToken
key={collaborator.id}
collaborator={collaborator}
marginRight={1}
/>
))}
</React.Fragment>
);
};

Hi @Kasra - great, thanks for this, will try it out.


Hi @Kasra - great, thanks for this, will try it out.


We’ve fixed the typo in the docs, thanks for reporting this!


Reply