How to create an indicator with React?

Question

React

I need to make such an indicator using React
How can I render for example 6 divs, and depending on the number, some of them are filled, some are empty... For example, I got a number from the back 5 - 5 filled , 1 - empty

Answer 1

const Indicator = ({ value, max = 6 }) => (
  <div className="indicator">
    {[...Array(max)].map((n, 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/f89hvusy/