Dynamically rendered Tag is always lowercase

Question

I am trying to output some svgs and output them from a list, here is my render method:

render() {

        const renderTag = () => {
            const Tag = this.props.id
            return(<Tag />)
        } 

        return (
            <div key={this.props.name} className="social-box">
                <a className={this.props.id + "-link"}> 
                    {renderTag()}
                </a>
            </div>
        )
    }

However, the DOM node is always lowercase i.e. <facebook> rather than <Facebook> this.props.id is correctly rendered to the console as Facebook. Can anyone tell me why react or the browser incorrectly renders as lowercase, and therefore not the component, and how to fix?

Answer 1

It's a technical implementation of React, all tags get lowercased on this line here, AFAIK it's not possible to render non-lowercased tags and that is by design.

Read more here.

Answer 2

i suggest that you would take a look at this article about dynamic components.

The most relevant example from the article:

import React, { Component } from 'react';
import FooComponent from './foo-component';
import BarComponent from './bar-component';
class MyComponent extends Component {
    components = {
        foo: FooComponent,
        bar: BarComponent
    };
    render() {
       const TagName = this.components[this.props.tag || 'foo'];
       return <TagName />
    }
}
export default MyComponent;

you most likely have a limited amount of components that could be rendered, so you might create a dictionary that contain a key (name of the component) to the component itself (as shown in the example) and just use it that way:

import Facebook from './FaceBook';
import Twitter from './Twitter';

const components = {
   facebook: Facebook,
   twitter: Twitter
};
    render() {
            return <div key={this.props.name} className="social-box">
                    <a className={this.props.id + "-link"}> 
                        <components[this.props.id] />
                    </a>                
</div>;

    }