Different class name based on condition in React 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 &lt;div className={classNameToUse}&gt;{number}&lt;/div&gt;;
}
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 &lt;div className={"number " + getNumberClass(condition)}}&gt;{number}&lt;/div&gt;