CollaboratorToken Issue

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.

1 Like

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

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

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