How to distribute styles between elements?

Question

css

Some data is coming from the database. There are 5 kinds of background colors for these elements. How can you do the following dynamically? Hope you understand what I mean.

.style-1 { bgc: red }
.style-2 { bgc: yellow }
.style3 { bgc: green }

<li className="style-1">First</li>
<li className="style-2">Second</li>
<li className="style-3">Third</li>
<li className="style-1">Fourth</li>
<li className="style-2">Fifth</li>

It is not necessary to use classes, but simply on :first-child, for example, write styles inside CSS.
How to implement it correctly?
Thank you!

Answer 1

render() {
  return (
    <ul>
     {this.state.items.map((item, idx) => <li className={`style-${idx%3+1}`}>{item}</li>}
    </ul>
  );
}

I hope you understand what I mean