JSFiddle - React, Tailwind, and code Playground
JavaScript
render() {
var data = this.props.data;
var title = this.props.data.title,
author = this.props.data.author,
text = this.props.data.text,
like = this.props.data.like,
dislike = this.props.data.dislike;
var newsTemplate = data.map(function(item, index) {
return <div key = {index}>
<div className="title_name"><p className = "title_textauthor">Title: {item.title}</p></div>
<div className="title_text"><p>{item.text}</p></div>
<div className="title_author"><p className = "title_textauthor">Author: {item.author}</p></div>
<div className="title_rating">
<p>Rating: <span className="likes"><i className="fa fa-thumbs-up" aria-hidden="true" onClick = {this.LikeClick.bind(this)}></i>{item.like}</span>
<span className="dislikes"><i className="fa fa-thumbs-down" aria-hidden="true"></i>{item.dislike}</span></p></div>
</div>;
}.bind(this))
return <div className="title">{newsTemplate}</div>;
}
}