Export React component to be used in a JSX tag

Question

The Goal:

Replace the default burger icon of react-burger-menu with an icon from react-icons-kit. Example from the former's docs:

<Menu customBurgerIcon={ <img src="img/icon.svg" /> } />

However, I'd like to have a module of icons and import from that. So the above example would be something like <Menu customBurgerIcon={MenuIcon} />.

The Problem:

I get an error saying: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."

I'm exporting my icon like this:

// Icons.js

import React from 'react';
import { Icon } from 'react-icons-kit';
import { menu } from 'react-icons-kit/icomoon/menu';


export const MenuIcon = () => <Icon icon={menu} />;

And using it like this:

// Menu.js

import React from 'react';
import { slide as BurgerMenu } from 'react-burger-menu';
import { MenuIcon } from './Icons';

// ...

class Menu extends React.Component {

  // ...

  render() {
    return (
      <BurgerMenu
        isOpen={open}
        onStateChange={state => this.handleStateChange(state)}
        customBurgerIcon={MenuIcon}
      >
    // ...
    );
  }
}

If I do the imports from react-icons-kit directly in Menu.js and write customBurgerIcon={<Icon icon={menu} />} it works. I suppose there must be something wrong with the way I'm trying to export the icon component.

How to fix this? Thank you in advance!

jsw324 jsw324 · Accepted Answer · 2018-08-09T13:26:11

try

 return (
      <BurgerMenu
        isOpen={open}
        onStateChange={state => this.handleStateChange(state)}
        customBurgerIcon={<MenuIcon />}
      >

in Menu.js

Export React component to be used in a JSX tag

1 Answers