Skip to main content
Solved

CollaboratorToken Issue

  • June 6, 2020
  • 5 replies
  • 29 views
JonathanBowen
Forum|alt.badge.img+18

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!

Best answer by 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>
  );
};

    5 replies

    M
    Forum|alt.badge.img+13
    • Matthew_Thomas
    • Inspiring
    • 55 replies
    • June 6, 2020

    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
    Forum|alt.badge.img+18
    • JonathanBowen
    • Author
    • Inspiring
    • 1110 replies
    • June 6, 2020

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

    K
    Forum|alt.badge.img+4
    • Kasra
    • Inspiring
    • 192 replies
    • Answer
    • June 9, 2020

    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
    Forum|alt.badge.img+18
    • JonathanBowen
    • Author
    • Inspiring
    • 1110 replies
    • June 9, 2020

    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.

    K
    Forum|alt.badge.img+4
    • Kasra
    • Inspiring
    • 192 replies
    • June 9, 2020

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


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


    Terms & ConditionsAccessibility statement