Icon in <Table> breaks?

0
closed
Twoy519
Twoy519
Posted 4 months ago

Icon in <Table> breaks? #614

Bug report 🐞

I'm trying to conditionally display icons telling a user whether the item in the table row is public or private. I'm getting icons from @geist-ui/react-icons in a <Table.Column> element but I can't figure this out

Version & Environment

  • Version of browser
  • Version of geist-ui/react
@geist-ui/[email protected]
@geist-ui/[email protected]

Expected Behaviour

The behavior I expect is for icons from geist react-icons to render in

columns

Actual results (or Errors)

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
code
import { MdPublic, IoMdEyeOff } from '@geist-ui/react-icons';

export default function Component() {
...
const publicIcon = (value) => {
  if (value) {
    return <MdPublic />;
  }
  return <IoMdEyeOff />;
};
...
return (
...
<>
  ...
  <Table data={items}>
      <Table.Column prop="public" label="public" render={publicIcon} />
  </Table>
  ...
...