List Component

List.js

import React, { useState, useEffect } from "react";
import axios from "axios";

const List = () => {
  const url = "https://medrum.herokuapp.com/articles";
  const [data, setData] = useState([]);
  useEffect(() => {
    axios.get(url).then(res => {
      setData(res.data);
    });
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <ul className="list-group mb-2">
        {data.map((article, key) => (
          <li className="list-group-item" key={key}>
            <a href={article.url} target="_blank">
              {article.title}
            </a>
          </li>
        ))}
      </ul>
    </>
  );
};

export default List;