{"size": 1206, "ext": "js", "max_stars_repo_path": "client/src/pages/bustops/Bustops.js", "max_stars_repo_name": "jlcalderon/mn-bus", "max_stars_repo_stars_event_min_datetime": "2021-07-29T20:23:48.000Z", "max_stars_repo_stars_event_max_datetime": "2021-07-29T20:23:48.000Z", "max_issues_repo_path": "client/src/pages/bustops/Bustops.js", "max_issues_repo_name": "jlcalderon/mn-bus", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/pages/bustops/Bustops.js", "max_forks_repo_name": "jlcalderon/mn-bus", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.2173913043, "max_line_length": 74, "alphanum_fraction": 0.4792703151}
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import Header from "../../components/header/Header";
import "../../App.css";

const Bustops = () => {
  let { route } = useParams();
  let { direction } = useParams();
  const [stopsList, setStopsList] = useState([]);
  let headingText = `Catch the next ride on the following stops:`;

  useEffect(() => {
    fetch(`http://localhost:3001/Stops/${route}/${direction}?format=json`)
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        setStopsList(data);
      });
  }, []);

  return (
    <div>
      <Header text={headingText} />
      <div className="forms-container">
        <table>
          <tbody>
            {stopsList.map((stopItem) => (
              <tr key={stopItem.Value}>
                <td>
                  <h1>{stopItem.Text}</h1>
                </td>
                <td>
                  <a href="#" className="links">
                    Open Location in Map
                  </a>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};
export default Bustops;
