Как создать индикатор в помощью React?

Question

[Bogdnan123]

Мне нужно сделать такой индикатор с помощью Реакта
Как я могу отрендерить к примеру 6 div, и в зависимости от числа некоторые из них заполнены, некоторые пустые... К примеру пришло мне число с бека 5 - 5 заполненых , 1 - пуста

Answer 1

[0xD34F]

const Indicator = ({ value, max = 6 }) => (
  <div>
    {Array.from({ length: max }, (_, i) => (
      <div className={`indicator-cell ${i < value ? 'active' : ''}`}></div>
    ))}
  </div>
);

.indicator-cell {
  background: white;
}
.indicator-cell.active {
  background: red;
}

<Indicator value={4} />
<Indicator value={1} />
<Indicator value={8} max={12} />

https://jsfiddle.net/j9w03sba/

Comments

[Bogdnan123]

Дай Бог тебе здоровья!))