JSFiddle - React, Tailwind, and code Playground
JavaScript
class Title extends React.Component {
constructor(props) {
super(props);
this.state = {
data: React.PropTypes.shape({
author: React.PropTypes.string.isRequired,
title: React.PropTypes.string.isRequired,
text: React.PropTypes.string.isRequired,
like: React.PropTypes.number.isRequired,
dislike: React.PropTypes.number.isRequired,
likeState: true,
dislikeState: true
})
};
}
this.LikeClick(index,el) {
//получаем index
//если допустим у вас like - это массив
let likes = this.state.like
let currentValue = likes[index]; //текущее значение лайка
likes[index] = currentValue++ //увеличиваем значенеи лайка
this.setState({like:likes});
}
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,index)}></i>{item.like}</span> //здесь передаём index
<span className="dislikes"><i className="fa fa-thumbs-down" aria-hidden="true"></i>{item.dislike}</span></p></div>
</div>;
})
return <div className="title">{newsTemplate}</div>;
}
}