Help

The Community will be temporarily unavailable starting on Friday February 28. We’ll be back as soon as we can! To learn more, check out our Announcements blog post.

CollaboratorToken Issue

Topic Labels: Custom Extensions
Solved
Jump to Solution
5250 5
cancel
Showing results for 
Search instead for 
Did you mean: 

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>

Screenshot 2020-06-06 at 10.16.24

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

Thanks!

1 Solution

Accepted Solutions
Kasra
9 - Sun
9 - Sun

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>
  );
};

See Solution in Thread

5 Replies 5
Matthew_Thomas
7 - App Architect
7 - App Architect

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

Kasra
9 - Sun
9 - Sun

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.

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