JAM Stack - Project

app.js

import React, { Component } from "react";
import "./styles.css";

class App extends Component {
  state = {
    Attendees: []
  };
  componentDidMount() {
    fetch("https://hariketsheth.github.io/session-1-techamonth/Attendees.txt")
      .then((res) => res.text())
      .then((Attendees) => {
        Attendees = Attendees.split(
          `
`
        )
          .filter(Boolean)
          .map((person) => {
            const [Name, LinkedIn, GitHub] = person.split(",");
            return { Name, LinkedIn, GitHub };
          });
        this.setState({
          Attendees
        });
      });
  }
  render() {
    return (
      <div className="App">
        <h1>TechAMonth Attendees</h1>
        <p>Here is all the attendees for TechAMonth Event</p>
        <ul className="Attendees">
          {this.state.Attendees.map((a, key) => (
            <li key={key}>
              <img
                src={"https://avatars.githubusercontent.com/" + a.GitHub}
                alt={a.Name}
              />
              <p>
                <strong>{a.Name}</strong>
              </p>
              <p>
                Connect with me on{" "}
                <a target="_blank" rel="noreferrer" href={a.LinkedIn}>
                  LinkedIn
                </a>
                .
              </p>
              <p>
                Check out my projects on{" "}
                <a
                  target="_blank"
                  rel="noreferrer"
                  href={"https://github.com/" + a.GitHub}
                >
                  GitHub
                </a>
                .
              </p>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;