Skip to content

Instantly share code, notes, and snippets.

@hariketsheth
Created July 12, 2021 16:17
Show Gist options
  • Save hariketsheth/c8e5905b83ad3294ec74325d437b8b99 to your computer and use it in GitHub Desktop.
Save hariketsheth/c8e5905b83ad3294ec74325d437b8b99 to your computer and use it in GitHub Desktop.
JAM Stack - Project
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment