CollaboratorToken Issue

Development and integrations Custom Apps
#1

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
Screenshot 2020-06-06 at 10.16.241464×318 51.4 KB

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

Thanks!

#2

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
#3

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

#4

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
#5

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

#6

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

#7