title: Cannot add to cart on frontend react.js, although the end points are working correctly and it is adding items to cart in post man app
body: <p><a href="https://i.stack.imgur.com/qxeDC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qxeDC.png" alt="enter image description here"></a><a href="https://i.stack.imgur.com/T00Bp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T00Bp.png" alt="Postman response"></a>so I am trying to add to cart. My node.js endpoints are working correctly and I am able to add items to cart when viewed in postman app but it does not display items on the front end, and when inspecting through the chrome developers tools, the items array is empty when on the postman while testing it is successfully storing items.</p>
  
  <p>Here is my server.js</p>
  
  <pre><code>    const express = require("express");
  const app = express();
  const bodyParser = require("body-parser");
  const cors = require("cors");
  const mongoose = require("mongoose");
  let Book = require("./models/bookModel");
  const port = 4000;
  
  app.use(cors());
  app.use(bodyParser.json());
  
  
  mongoose.connect("mongodb://127.0.0.1:27017/books", { useNewUrlParser: true });
  const connection = mongoose.connection;
  
  connection.once("open", function() {
    console.log("MongoDB database connection established successfully..");
  });
  
  const bookRoutes = express.Router();
  app.use("/books", bookRoutes);
  const cartRoutes = express.Router();
  app.use("/cart", cartRoutes);
  
  bookRoutes.route("/").get(function(req, res) {
    Book.find(function(err, books) {
      if (err) {
        console.log(err);
      } else {
        res.json(books);
      }
    });
  });
  
  bookRoutes.route("/:id").get(function(req, res) {
    let id = req.params.id;
    Book.findById(id, function(err, book) {
      res.json(book);
    });
  });
  
  cartRoutes.route("/").get(function(req, res) {
    var cart = req.session.cart;
    var displayCart = { items: [], total: 0 };
    var total = 0;
  
    for (var item in cart) {
      displayCart.items.push(cart[item]);
      total += cart[item].qty * cart[item].price;
    }
    displayCart.total = total;
  
    return res.json(displayCart);
  });
  
  cartRoutes.route("/:id").post(function(req, res) {
    req.session.cart = req.session.cart || {};
    var cart = req.session.cart;
    let id = req.params.id;
    Book.findById(id, function(err, book) {
      if (err) {
        console.log(err);
      }
      if (cart[id]) {
        cart[id].qty++;
      } else {
        cart[id] = {
          item: book._id,
          title: book.title,
          price: book.price,
          qty: 1
        };
      }
      res.redirect("/cart");
    });
  });
  app.listen(port, function() {
    console.log("Server is running on Port: " + port);
  });
  </code></pre>
  
  <p>the server response:</p>
  
  <pre><code>{
      "items": [
          {
              "item": "5dd7668f33c21d811b74f403",
              "title": "Modern PHP",
              "price": 25.65,
              "qty": 1
          },
          {
              "item": "5dd6bb36725bbba1ca482eea",
              "title": "Professional Node.js",
              "price": 20.56,
              "qty": 2
          }
      ],
      "total": 66.77
  }
  </code></pre>
  
  <p>cart.js</p>
  
  <pre><code>import React, { Component } from "react";
  import axios from "axios";
  import CartItem from "./cart1-item.component.js";
  import "bootstrap/dist/css/bootstrap.min.css";
  import { throws } from "assert";
  
  export default class Cart extends Component {
    constructor(props) {
      super(props);
      this.state = {
        items: []
      };
    }
    componentDidMount() {
      axios
        .get("http://localhost:4000/cart/")
        .then(response =&gt; {
          this.setState({
            items: response.data.items
          });
          console.log(response.data.items);
        })
        .catch(function(err) {
          console.log(err);
        });
    }
  
    checkItems() {
      return this.state.items.map((currItem, i) =&gt; {
        return &lt;CartItem book={currItem} key={i}&gt;&lt;/CartItem&gt;;
      });
    }
  
    Calculate = item =&gt; {
      return item.qty * item.price;
    };
  
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;{this.checkItems()}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>cartitem.js</p>
  
  <pre><code>import React, { Component } from "react";
  import "bootstrap/dist/css/bootstrap.min.css";
  
  const CartItem = props =&gt; {
    return (
      &lt;div className="container"&gt;
        &lt;h2&gt;{props.book.title}&lt;/h2&gt;
      &lt;/div&gt;
    );
  };
  
  export default CartItem;
  </code></pre>
  
  <p>here is the app.js code for cart route</p>
  
  <pre><code>&lt;Route path="/cart" exact component={Cart}&gt;&lt;/Route&gt;
  </code></pre>
  
  <p>Edited code book-details.component.js</p>
  
  <pre><code>import React, { Component } from "react";
  import "../css/styles.css";
  import axios from "axios";
  
  export default class BookDetails extends Component {
    constructor(props) {
      super(props);
      this.state = {
        book: []
      };
    }
  
    componentDidMount() {
      axios
        .get("http://localhost:4000/books/" + this.props.match.params.id)
        .then(response =&gt; {
          this.setState({ book: response.data });
        })
        .catch(function(err) {
          console.log(err);
        });
    }
    AddToCart = e =&gt; {
      let id = e.currentTarget.getAttribute("id");
      axios.post(`http://localhost:4000/cart/${id}`).then(() =&gt; {
        window.location.href = "http://localhost:3000/cart/";
      });
    };
  
    render() {
      const { book, quantity } = this.state;
      return (
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col sm-4"&gt;
              &lt;img src={`./images/${book.cover}`}&gt;&lt;/img&gt;
            &lt;/div&gt;
            &lt;div className="col sm-8"&gt;
              &lt;h2&gt;{book.title}&lt;/h2&gt;
              &lt;ul&gt;
                &lt;li&gt;Category: {book.category}&lt;/li&gt;
                &lt;li&gt;Author: {book.author}&lt;/li&gt;
              &lt;/ul&gt;
              &lt;p className="button blue"&gt;${book.price}&lt;/p&gt;
              &lt;p&gt;{book.description}&lt;/p&gt;
              &lt;button id={book._id} onClick={this.AddToCart}&gt;
                Add To Cart
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from "react";
  import { BrowserRouter as Router, Route, Link } from "react-router-dom";
  import BooksList from "./components/book-list.component.js";
  import BookDetails from "./components/book-details.component.js";
  import "bootstrap/dist/css/bootstrap.min.css";
  import Navigation from "./components/navigation.component";
  import Cart from "./components/cart1.component";
  
  class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;Navigation&gt;&lt;/Navigation&gt;
  
          &lt;Route
            path="/"
            exact
            render={() =&gt; (
              &lt;div className="container"&gt;
                &lt;BooksList&gt;&lt;/BooksList&gt;
              &lt;/div&gt;
            )}
          &gt;&lt;/Route&gt;
          &lt;Route path="/books/:id" exact component={BookDetails}&gt;&lt;/Route&gt;
          &lt;Route path="/cart/" exact component={Cart}&gt;&lt;/Route&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Any help would be appreciated.</p>