Pass component as a prop in Reactjs

Question

I got an article showing how to pass a component as a prop, but I could not make it works, can anyone help me on it?

This is the example I got.

import React from "react";
import Foo from "./components/Foo";
import Bar from "./components/Bar";

const Components = {
  foo: Foo,
  bar: Bar
};

export default block => {
  // component does exist
  if (typeof Components[block.component] !== "undefined") {
    return React.createElement(Components[block.component], {
      key: block._uid,
      block: block
    });
  }
}

And this is my code

I have one file called routes.js, that has the state called routes.

var routes = [
  {
    path: "/user-profile",
    name: "Quem Somos",
    icon: "FaIdBadge",
    component: UserProfile,
    layout: "/admin"
  }

And another component called Sidebar, where I receive routes and need to change the icon based in what is configured at the 'routes' prop.

const Components = {
      fa:FaIdBadge
    }

<i>{prop => Components(prop.icon)}</i>

But the property with the icon is not recognized.

Answer 1

You're pretty close.

Choosing the Type as Runtime

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

So more specific to your example

// component map in the file for lookup
const components = {
  fa: FaIdBadge,
}

...

  // In the render function
  // fetch the component, i.e. props.icon === 'fa'
  const IconComponent = components[props.icon];

  ...

  <IconComponent />