title: How to retrieve a React component from an object property
body: <p>I've got a <code>SliderMenu</code> React component, which receives an array containing its elements. These elements are objects, and one of their properties is the icon that will be shown in the menu:</p>
  <pre><code>function SliderMenu({ options }) {
    return (
      &lt;&gt;
        &lt;Drawer open&gt;
          &lt;List&gt;
            {options.map((item) =&gt; {
              const { icon: ItemIcon } = item || {};
              return (
                &lt;ListItem button key={`menuItem_${item.text.replace(/\s/g, '')}`}&gt;
                  &lt;ListItemIcon&gt;
                    &lt;ItemIcon /&gt;
                  &lt;/ListItemIcon&gt;
                  &lt;ListItemText primary={item.text} /&gt;
                &lt;/ListItem&gt;
              );
            })}
          &lt;/List&gt;
        &lt;/Drawer&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>This component is called from an upper component (because I'd like to be able to create multiple <code>SliderMenu</code> if I needed them), which specifies the elements array and passes them as props:</p>
  <pre><code>import React from 'react';
  import { HomeRoundedIcon } from '@material-ui/icons/HomeRounded';
  import SliderMenu from '../../components/SliderMenu';
  
  function MainMenu() {
    const menuOptions = [
      {
        text: 'Home',
        icon: HomeRoundedIcon,
      },
    ];
  
    return (
      &lt;SliderMenu options={menuOptions} /&gt;
    );
  }
  
  export default MainMenu;
  </code></pre>
  <p>The problem here is that whenever I try this code, <code>ItemIcon</code> is undefined, and I'm receiving the following error:</p>
  <blockquote>
  <p>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.</p>
  <p>Check the render method of <code>SliderMenu</code>.</p>
  </blockquote>
  <p>However, if I try:</p>
  <pre><code>const menuOptions = [
      {
          text: 'Home',
          icon: &lt;HomeRoundedIcon /&gt;,
      },
  ];
  </code></pre>
  <p><code>ItemIcon</code> has a value, and I get the following error:</p>
  <blockquote>
  <p>Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.</p>
  <p>Check the render method of <code>SliderMenu</code>.</p>
  </blockquote>
  <p>I would like to be able to specify different menu elements with different icons and so on, depending on the context, and then use the common component to render it and have a consistent behaviour across all menus.</p>
  <p><strong>How can I define the icon in the object, using the icon component library, and then pass it via <code>props</code> to the <code>SliderMenu</code> so it can render it</strong> (without having to import all the icons and make a switch to see which icon has to render)?</p>