CustomerListPage component that lists Customer component

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",

src/components/Customer.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { Route, Link } from "react-router-dom";
+import 'bootstrap/dist/css/bootstrap.css';
+
+class Customer extends Component {
+  render() {
+    const {id, name, registered_at, address, 
+      city, state, postal_code, phone, 
+      account_credit, movies_checked_out_count} = this.props;
+    return (
+
+      <tr>
+        <th scope="row">{id}</th>
+        <td>{name}</td>
+        <td>{registered_at}</td>
+        <td>{address}</td>
+        <td>{city}</td>
+        <td>{state}</td>
+        <td>{postal_code}</td>
+        <td>{phone}</td>
+        <td>{account_credit}</td>
+        <td>{movies_checked_out_count}</td>
+        <td> 
+          <button className="btn btn-primary" >
+            Select
+          </button>
+        </td>
+      </tr>
+
+    );
+  }
+}
+export default Customer;

src/components/CustomerListPage.js

@@ -1,15 +1,69 @@
 import React, { Component } from 'react';
 import { Route, Link } from "react-router-dom";
-
+import axios from 'axios'
+import Customer from './Customer'
+import 'bootstrap/dist/css/bootstrap.css';
 class CustomerListPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      customers:[],
+      error: null
+    };
+  }
+
+  componentDidMount() {
+    const URL = "http://localhost:3001/customers"
+    axios.get(URL)
+      .then((response) => {
+        this.setState({ customers: response.data });
+      })
+      .catch((error) => {
+        this.setState({ error: error.message });
+      });
+  }
   render() {
+    const { customers } = this.state;
+    const customerList = customers.map((customers) => {
+      const {id, name, registered_at, address, 
+            city, state, postal_code, phone, 
+            account_credit, movies_checked_out_count} = customers;
+      return ( <Customer key={id} id={id} name={name} registered_at={registered_at}
+              address={address} city={city} state={state} postal_code={postal_code}
+              phone={phone} account_credit={account_credit} movies_checked_out_count={movies_checked_out_count} 
+              /> )
+    });
+
+    const errorSection = (this.state.error) ? 
+    (<section className="error">
+       Error: {this.state.error}
+     </section>) : null;
+
     return (
-      <div>
-        <h3>CustomerListPage</h3>
-        <p>
-          hello customer
-        </p>
-      </div>
+      <section>
+        {errorSection}
+        <div>
+          <table class="table table-striped">
+            <thead>
+            <tr>
+              <th scope="col">#</th>
+              <th scope="col">Name</th>
+              <th scope="col">Registed At</th>
+              <th scope="col">Address</th>
+              <th scope="col">City</th>
+              <th scope="col">State</th>
+              <th scope="col">Postal Code</th>
+              <th scope="col">Phone</th>
+              <th scope="col">Account Credit</th>
+              <th scope="col">Movies Checked Out Count</th>
+            </tr>
+            </thead>
+            <tbody>
+              {customerList}
+            </tbody>
+          </table>
+        </div>
+      </section>
     );
   }
 }