Как распределить стили между элементами?

Question

[Jedi]

Из базы данных приходят некоторые данные. Есть 5 видов фоновых цветов для этих элементов. Как можно сделать сдедующее динамично? Надеюсь, что вы поймете о чем я.

.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>

Необязательно использовать классы, а просто по :first-child, например, написать стили внутри CSS.
Как это грамотно реализовать?

Спасибо!

Answer 1

[Robur]

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

Надеюсь вы поймете о чем я

Comments

[Jedi]

Благодарю! :)