How to dynamically populate a grid with data?

Question

React

Hello. Please tell me how can I solve the following problem. I have some json data.

{
  "cards": [
    { "id": "1", "content": "Lorem ipsum dolor sit amet." },
    { "id": "2", "content": "Lorem ipsum dolor sit amet." },
    { "id": "3", "content": "Lorem ipsum dolor sit amet." },
    { "id": "4", "content": "Lorem ipsum dolor sit amet." },
    { "id": "5", "content": "Lorem ipsum dolor sit amet." },
    { "id": "6", "content": "Lorem ipsum dolor sit amet." },
    { "id": "7", "content": "Lorem ipsum dolor sit amet." },
    { "id": "8", "content": "Lorem ipsum dolor sit amet." },
    { "id": "9", "content": "Lorem ipsum dolor sit amet." },
    { "id": "10", "content": "Lorem ipsum dolor sit amet." },
    { "id": "11", "content": "Lorem ipsum dolor sit amet." }
  ]
}

I receive this data and pass it through props to the component.
I would like to implement the following logic:

// this.cardsData, это данные

ReactDOM.render(
    <NewsFeedPreviewList
        list={this.cardsData}
    />,
    document.querySelector('[data-dc-news-feed-preview-ref="primary-wrapper"]'));

NewsFeedPreviewList.js

class NewsFeedPreviewList extends Component {
  renderNewsFeedPreview = (list) => {
    let template = null;
    template = list.map((item, i) => {
      return (
          <PlayerCardRow
              key={i}
              item={item}
          />
      );
    });
    return template;
 }
 
  render() {
    return (
      <ul className="news-feed-preview__layout">
        { this.renderNewsFeedPreview(this.props.list) }
      </ul>
    );
  }
}

I would like to implement the following logic:
I need to set classes according to the following css principle, for example: the first will have className="item__one", the second element will have className="item__two", the third will have className="item__three", the fourth will have className="item__four ". Then, the fifth one has className="item__one", the sixth one has className="item__two", the seventh one has className="item__three", the eighth one has className="item__four", and then the cycle is closed again: the ninth one will have className="item__one" and so on Further.
Please tell me how to implement this algorithm correctly.