install axios, make call to api to populate contacts in DOM

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",

src/App.js

@@ -1,15 +1,35 @@
-import logo from './logo.svg';
 import './App.css';
 import React from 'react';
+import axios from 'axios';
 
 class App extends React.Component {
 
+	state = {
+		contacts: []
+	}
+
+	componentDidMount = ()=>{
+		axios
+			.get('https://desolate-thicket-29906.herokuapp.com/api/contacts')
+			.then((response)=>{
+				this.setState({
+					contacts:response.data
+				})
+			}
+		)
+	}
+
 	render = ()=>{
 		return <main>
 			<h1>Contacts App</h1>
 			<section>
 				<h2>List of Current Conacts</h2>
 				<ul>
+					{
+						this.state.contacts.map((contact)=>{
+							return <li key={contact.id}>{contact.name} is {contact.age} years old</li>
+						})
+					}
 				</ul>
 			</section>
 			<section>