Здравствуйте. Подскажите пожалуйста как мне решить следующую задачу. У меня есть некое количество json данных.
{
"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." }
]
}
Я получаю эти данные и передаю через props в компонент.
// 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 (
<div className="news-feed-preview__layout">
{ this.renderNewsFeedPreview(this.props.list) }
</div>
);
}
}
Мне бы хотелось реализовать следующую логику:
Мне необходимо установить по следующему принципу вот такую структуру, например:
<div className="section">
<div className="section__item">
<a>Здесь будут элементы массива с индексом 0</a>
</div>
<div className="section__item">
<a>Здесь будут элементы массива с индексом 1</a>
</div>
<div className="section__item">
<a>Здесь будут элементы массива с индексом 2</a>
</div>
</div>
<div className="section">
<div className="section__item">
<a>Здесь будут элементы массива с индексом 3</a>
</div>
<div className="section__item">
<a>Здесь будут элементы массива с индексом 4</a>
</div>
<div className="section__item">
<a>Здесь будут элементы массива с индексом 5</a>
</div>
</div>
<div className="section">
<div className="section__item">
<a>Здесь будут элементы массива с индексом 6</a>
</div>
<div className="section__item">
<a>Здесь будут элементы массива с индексом 7</a>
</div>
</div>
