How to render different element based on props?

Question

I am in a project where we use very different headings.

• I am trying to unify them into one component
• I am trying to decouple semantics (h1, h2, ...) from looks

Here is what the currently looks like (work in progress)

import * as React from 'react';
import './Heading.css';
import { MarkupContent } from 'app-types';
import HeadingElement from './HeadingElement';

interface HeadingProps {
    type: 'fullwidth' | 'emphasis';
    children: MarkupContent;
    element: 'h1' | 'h2';
}

function Heading(props: HeadingProps) {
    switch (props.type) {
        case 'fullwidth':
            return (
                <div className="big-heading-container">
                    <div className="big-heading-section">
                        <HeadingElement element={props.element} classes="big-heading-text">
                            {props.children}
                        </HeadingElement>
                    </div>
                </div>
            );
        case 'emphasis':
            return (
                <h2 className="heading--emphasized">
                    {props.children}
                </h2>
            );
        default:
            return (
                <></>
            );
    }
}

export default Heading;

import * as React from 'react';
import { MarkupContent } from 'app-types';

interface HeadingElementProps {
    element: 'h1' | 'h2';
    classes: string;
    children: MarkupContent;
}

function HeadingElement(props: HeadingElementProps) {
    switch (props.element) {
        case 'h1':
            return (
                <h1 className={props.classes}>{props.children}</h1>
            );
        case 'h2':
            return (
                <h2 className={props.classes}>{props.children}</h2>
            );
        default:
            return (
                <></>
            );
    }
}

export default HeadingElement;

@import "../../parameters.scss";

.big-heading {
    &-container {
        padding: 90px 25px 0 25px;
        background-image: url("../../images/heading-background.png");
        border-bottom: 1px solid $green;
    }

    &-section {
        max-width: $max-width;
        margin: 0 auto 0 auto;
        display: flex;   
    }

    &-text {
        font-size: 1.5rem;
        text-transform: uppercase;
        border-bottom: 4px solid $green;
        padding: 0 0 15px 0;
        display: inline; 
    }
}

  .heading--emphasized {
    font-size: 1.7rem;
    line-height: 2.0rem;
    font-weight: bold;
    text-transform: uppercase;
    display: inline;
    border-top: solid 4px #94d500;
    padding-top: 10px;
    padding-right: 30px; 
}

I am particularly interested in the switch statement where I return an or element with passed on props.children .

Is this a good approach or is there a better way to switch which element is rendered based on a prop?

Answer 1

Looks fine to me. The same approach is also used for changing states to render something different.

Answer 2

If props.element can only be 'h1' or 'h2' (two possible values) I'd rather use ternary conditional statements instead of a switch statement. Is something like this looks better?

function HeadingElement(props: HeadingElementProps) {
    return props.element === 'h1' ? <h1 className={props.classes}>{props.children}</h1> : <h2 className={props.classes}>{props.children}</h2>
}