: expected on multiple ternary `if-else` rendering of componentes in React... How do I "Finish" or "Close" the ternary statement?

Question

I am creating a simple component which renders a colored tag on my HTML:

import React, {Component} from 'react';

import "./styles.scss";

interface ColorTagProps {
    tagType?: string;
    tagText?: string;
}

/**
 * Renderiza uma `Color Tag` de acordo com o tipo de tag recebido no Props ao gerar o componente.
 * São eles:
 *
 * - Success
 * - Warning
 * - Danger
 * - Info
 *
 * **/
export class ColorTag extends Component<ColorTagProps> {

    render() {
        return (
            this.props.tagType === "Success" ?
                (
                    <div
                        style={{
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "space-between",
                        }}
                    >
                        <div className="tagType-success">{this.props.tagText}</div>
                    </div>) :
                this.props.tagType === "Warning" ?
                    (
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "space-between",
                            }}
                        >
                            <div className="tagType-warning">{this.props.tagText}</div>
                        </div>) :
                    this.props.tagType === "Danger" ?
                    (
                        <div
                            style={{
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "space-between",
                            }}
                        >
                            <div className="tagType-danger">{this.props.tagText}</div>
                        </div>
                    )
        )
    }
}

export default ColorTag;

I expected that the code returned no errors, but it still thinking that will be other "Elses", tho the last one is the final one and I don't want to create a additional : (Else).

How do I "Finish" and "Close" the logic?

Answer 1

This is my idea for your example:

import React, {Component} from 'react';

import "./styles.scss";

interface ColorTagProps {
    tagType?: string;
    tagText?: string;
}

/**
 * Renderiza uma `Color Tag` de acordo com o tipo de tag recebido no Props ao gerar o componente.
 * São eles:
 *
 * - Success
 * - Warning
 * - Danger
 * - Info
 *
 * **/
export class ColorTag extends Component<ColorTagProps> {

    render() {
        return (
            <div
                style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                }}
            >
                <div className={`tagType-${this.props.tagType}`}>{this.props.tagText}</div>
            </div>
        )
    }
}

I don't know if the code syntax is ok, I write all the code here