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 />
// }

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