- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jun 06, 2020 02:18 AM
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!
Solved! Go to Solution.
Accepted Solutions

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jun 08, 2020 08:18 PM
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>
);
};

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jun 06, 2020 05:22 AM
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jun 06, 2020 06:34 AM
Yeah, I should have said, this doesn’t work for me either unfortunately

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jun 08, 2020 08:18 PM
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>
);
};
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jun 09, 2020 08:39 AM
Hi @Kasra - great, thanks for this, will try it out.

- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Jun 09, 2020 02:20 PM
We’ve fixed the typo in the docs, thanks for reporting this!
