snippet2.js

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import "./ranking.css";

class Ranking extends Component {
  //

  render() {
    console.log(this.props.articles);
    return (
      <div className="rank_border">
        <h1>Please Rank Your articles by clicking the Heart Icon</h1>
        // I add an index here
		{this.props.articles.map((article, index) => {
          return (
            <div>
              <div className="rank_title">
                <h1 key={index}>{article.title}</h1>
                <div>
                  <button onClick={() => this.props.addLikes(index)}>
                    <FontAwesomeIcon icon="heart" className="heart" />
                  </button>
                  <p>{this.props.likes}</p>
                  <button onClick={this.props.subtractLikes}>
                    <FontAwesomeIcon
                      icon="heart-broken"
                      className="heartbroken"
                    />
                  </button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

export default Ranking;