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,
    like: []
    })
  };
  }

  LikeClick(index, element){
    console.log('Current index is ' + index);
    console.log('Current value of likes is ' + this.state.news[index].like);
  }

  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((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="likess"><i className="fa fa-thumbs-up" aria-hidden="true" onClick = {this.LikeClick.bind(this, index)}></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>;
  }
}

class News extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      visible: false,
      titleChecked: true,
      textChecked: true,
      authorChecked: true,
      news: my_news
    };
    this.PostClick = this.PostClick.bind(this);
    this.ButtonClick = this.ButtonClick.bind(this);
  }

  PostClick() {

    var textEl =...