Class to create HTML heading tags in React I have a class which is part of my page layout. It is creating header tag elements (h1 - h5). Could someone tell me how I could improve it (I know it should be improved, but don't know how)? I have problem with rewriting almost the same code in switch cases. Would rather to create some kind of &lt;h{type}&gt;&lt;/h{type}&gt; code, but couldn't.

import React, {Component} from 'react';
import PropTypes from 'prop-types';

export class TypographyHeader extends Component {
    createHeader() {
        let txt        = this.props.text;
        let spaceIndex = txt.indexOf(' ');
        let p2         = txt.substr(spaceIndex);

        txt =
            &lt;span className="typography_header__distinctive_el"&gt;
                {txt.substr(0, spaceIndex)}
            &lt;/span&gt;;

        switch(this.props.headerType) {
            case 1:
                return &lt;h1 className="typography_header"&gt;{txt} {p2}&lt;/h1&gt;;
            case 2:
                return &lt;h2 className="typography_header"&gt;{txt} {p2}&lt;/h2&gt;;
            case 3:
                return &lt;h3 className="typography_header"&gt;{txt} {p2}&lt;/h3&gt;;
            case 4:
                return &lt;h4 className="typography_header"&gt;{txt} {p2}&lt;/h4&gt;;
            case 5:
                return &lt;h5 className="typography_header"&gt;{txt} {p2}&lt;/h5&gt;;
        }

        return &lt;h1 className="typography_header"&gt;{txt} {p2}&lt;/h1&gt;;
    }

    render() {
        return (
            &lt;div&gt;
                {this.createHeader()}
            &lt;/div&gt;
        );
    }
}

TypographyHeader.propTypes = {
    headerType: PropTypes.oneOf([1, 2, 3, 4, 5]).isRequired,
    text: PropTypes.string.isRequired,
};
Choosing the heading level at runtime:

According to the official docs, you cannot use expressions within JSX types. However, you can use capitalized variables:

const Heading = "h" + 1;
return &lt;Heading&gt;...&lt;/Heading&gt;;


Further suggestions:


Rename TypographyHeader to TypographyHeading to avoid confusion with &lt;header&gt;. 
Rename headerType to level.
Rename txt to text in let txt = this.props.text for consistency's sake.
Don't recycle the txt variable by rebinding it to a JSX &lt;span&gt;.
Consider using const variable bindings.
As there are 6 official heading levels, you might want to relax your propTypes constraints:

headerType: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired

Use destructuring arguments to avoid writing let txt = props.text.
Make the white space following the &lt;span&gt; element obvious by appending {" "}.
Handle heading texts without spaces by splitting according to this suggestion.


Proposed refactoring:

function TypographyHeading({text, level}) {

    // Split text into leading and remaining words:
    const space = text.indexOf(" ");
    const leading = text.substr(0, space);
    const remaining = text.substr(space + 1);

    // Select heading &lt;h1&gt; - &lt;h5&gt;:
    const Heading = "h" + level;

    return (
        &lt;div&gt;
            &lt;Heading className="typography_header"&gt;
                &lt;span className="typography_header__distinctive_el"&gt;
                    {leading}
                &lt;/span&gt;
                {" "}{remaining}
            &lt;/Heading&gt;
        &lt;/div&gt;
    );
}