<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div data-dc-news-feed-preview-ref="primary-wrapper"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
<script>
const { createElement, Component } = React;
class NewsFeedPreviewList extends Component {
render() {
return createElement("ul", {},
this.props.list.cards.map((item, key) =>
createElement(PlayerCardRow, { key, item, index: key })
)
);
}
}
const classNames = ["item__one", "item__two", "item__three", "item__four"];
class PlayerCardRow extends Component {
render() {
const className = classNames[this.props.index % classNames.length];
return createElement("div", { className }, `${this.props.item.id} ${className} ${this.props.item.content}`);
}
}
/* data */
const list = {
"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." }
]
};
ReactDOM.render(
createElement(NewsFeedPreviewList, { list }),
document.querySelector("[data-dc-news-feed-preview-ref='primary-wrapper']")
);
</script>
</body>
</html>