Class to create HTML heading tags in React
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;
    );
}