CollaboratorToken Issue

[JonathanBowen]

I’m using the CollaboratorToken component:

Airtable: Organize anything you can imagine

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!

[Matthew_Thomas]

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.

[JonathanBowen]

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

[Kasra]

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

[JonathanBowen]

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

[Kasra]

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