mapped books json & removed css files

Author: mann27

package-lock.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^4.3.1",
+    "node-sass": "^4.12.0",
     "react": "^16.10.2",
     "react-bootstrap": "^1.0.0-beta.14",
     "react-dom": "^16.10.2",

package.json

@@ -15,6 +15,9 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <script src="../DIST/web3.min.js"></script>
+
+
     <link
   rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

public/index.html

@@ -1,4 +1,5 @@
 import React from "react";
+
 import "./App.css";
 import { BrowserRouter } from "react-router-dom";
 

src/App.js

@@ -3,22 +3,30 @@ import React, { Component } from "react";
 import BookListItem from "../BookListItem";
 import { Table } from "react-bootstrap";
 
-export default class BookList extends Component {
+import books from "../books.json";
+
+class BookList extends Component {
   render() {
+    console.log(books);
+
+    const Books = books.map(item => {
+      return <BookListItem key={item.id} item={item} />;
+    });
+
     return (
-      <Table striped bordered hover>
+      <Table striped bordered hover className="book-list-table">
         <thead>
           <tr>
             <th>#</th>
-            <th>Book Name</th>
+            <th>Book</th>
             <th>Author</th>
             <th>Price</th>
           </tr>
         </thead>
-        <tbody>
-          <BookListItem />
-        </tbody>
+        <tbody>{Books}</tbody>
       </Table>
     );
   }
 }
+
+export default BookList;

src/components/HomePage/BookList/index.js

@@ -4,10 +4,10 @@ export default class BookListItem extends Component {
   render() {
     return (
       <tr>
-        <td>1</td>
-        <td>Harry Potter</td>
-        <td>Otto</td>
-        <td>@mdo</td>
+        <td>{this.props.item.id}</td>
+        <td>{this.props.item.name}</td>
+        <td>{this.props.item.author}</td>
+        <td>{this.props.item.price}</td>
       </tr>
     );
   }

src/components/HomePage/BookListItem/index.js

@@ -0,0 +1,26 @@
+[
+  {
+    "id": 1,
+    "name": "Harry Potter",
+    "author": "J.K Rowling",
+    "price": 15
+  },
+  {
+    "id": 2,
+    "name": "Angels and Demons",
+    "author": "Dan Brown",
+    "price": 19
+  },
+  {
+    "id": 3,
+    "name": "2 states",
+    "author": "Chetan Bhagat",
+    "price": 10
+  },
+  {
+    "id": 4,
+    "name": "Percy Jackson",
+    "author": "Rick Riordan",
+    "price": 28
+  }
+]

src/components/HomePage/books.json

@@ -10,7 +10,7 @@ class HomePage extends Component {
         <div className="nav-bar">
           <Navbar />
         </div>
-        <div className="main-content container">
+        <div className="main-content container" style={{ paddingTop: "40px" }}>
           <BookList />
         </div>
       </div>