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>

• ummahusla: Thanks, yeah I guess the best thing to do is to extract the selection into a separate function.