React — Dynamic Component Names with JSX

gistfile1.txt

import React from 'react'

import Layout from '../components/layout'
import Products from '../components/_products'
import IndoorCameras from '../components/_indoorCameras'
import OutdoorCameras from '../components/_outdoorCameras'

class InstarProducts extends Component {
    components = {
        products: Products,
        indoorCameras: IndoorCameras,
        outdoorCameras: OutdoorCameras,
    };
    render() {
       const TagName = this.components[this.props.tag || 'products'];
       return <TagName />
    }
}
export default InstarProducts;


// ############### imported with tag as prop
//
// import React, { Component } from 'react';
// import MyComponent from './my-component';
// 
// class App extends Component {
//     render() {
//         return (
//             <div>
//                 <InstarProducts tag="products" />
//                 <InstarProducts tag="OutdoorCameras" />
//             </div>
//          );
//      }
// }
// export default App;


// alternative
//
// render() {
//     const TagName = this.props.tag;
//     return <TagName />
// }

alternative doesnt work, but the first one worked great! thanks man :)

it almost works, but in my case instead of rendering
it renders
which renders Html instead of the component
any idea?

The component load like 'Undefined',
when i'm trying to return from a const function out of the componente class.