Different class name based on condition in React

Question

I have a very simple component, which should be styled differently based on the passed condition.

I wonder if there is a better approach to refactor this piece of code?

function RandomComponent({ number, condition }) {
    let classNameToUse;

    switch (condition) {
        case 'high':
            classNameToUse = 'number number--high';
            break;
        case 'medium':
            classNameToUse = 'number number--medium';
            break;
        default:
            classNameToUse = 'number';
    }

    return <div className={classNameToUse}>{number}</div>;
}

Answer 1

if you're just trying to decide between number--high number--medium or '' based on the condition variable, then just make a helper function that does that

then do return <div className={"number " + getNumberClass(condition)}}>{number}</div>