Я бы сделал что-то вроде этого:
const completedStep = 2; // 1, 2, 3 (0 == nothing is completed)
const steps = ['Step 1', 'Step 2', 'Step 3']; // can be whole component, not just a string
return (
<ol>
{steps.map((step, index) => {
return (
let className;
if (index < completedStep) {
className = 'completed';
} else if (index === completedStep) {
className = 'active';
} else {
className = '';
}
<li
key={index}
data-step={index + 1}
className={className}
>
{step}
</li>
);
})}
</ol>
);
Приведенные выше параметры можно передать как реквизиты для компонента.