Блог

 Error: Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead.
▶ 17 stack frames were collapsed.
(anonymous function)
src/index.js:9
   6 | import reducer, { initialState } from "./reducer";
   7 | import { StateProvider } from "./StateProvider";
   8 | 
>  9 | ReactDOM.render(
  10 |   <React.StrictMode>
  11 |     <StateProvider initialState={initialState} reducer={reducer}>
  12 |       <App />
View compiled
./src/index.js
http://localhost:3000/static/js/main.chunk.js:2644:34
__webpack_require__
/Users/code/marketplace-app/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
fn
/Users/code/marketplace-app/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:2977:37
__webpack_require__
/Users/code/marketplace-app/webpack/bootstrap:851
  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }
View compiled
checkDeferredModules
/Users/code/marketplace-app/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
webpackJsonpCallback
/Users/code/marketplace-app/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var resu<
View compiled
global code
http://localhost:3000/static/js/main.chunk.js:1:87
This screen is visible only in development. It will not appear if the app crashes in production. 

 import React from "react";
import "./Checkout.css";
import Subtotal from "./Subtotal";
import { useStateValue } from "./StateProvider";
import CheckoutProduct from "./CheckoutProduct";

function Checkout() {
  const [{ basket, user }, dispatch] = useStateValue();

  return (
    <div className="checkout">
      <div className="checkout__left">
        <img
          className="checkout__ad"
          src="https://images-na.ssl-images-amazon.com/images/G/02/UK_CCMP/TM/OCC_Amazon1._CB423492668_.jpg"
          alt=""
        />

        <div>
          <h3>Hello, {user?.email}</h3>
          <h2 className="checkout__title">Your shopping Basket</h2>

          {basket.map(item => (
            <CheckoutProduct
              id={item.id}
              title={item.title}
              image={item.image}
              price={item.price}
              rating={item.rating}
            />
          ))};

        </div>
      </div>

      <div className="checkout__right">
        <Subtotal />
      </div>
    </div>
  );
}

export default Checkout; 

 import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import reducer, { initialState } from "./reducer";
import { StateProvider } from "./StateProvider";

ReactDOM.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={reducer}>
      <App />
    </StateProvider>
  </React.StrictMode>,
  document.getElementById("root")
); 

 import React from "react";
import "./Subtotal.css";
import CurrencyFormat from "react-currency-format";
import { useStateValue } from "./StateProvider";
import { getBasketTotal } from "./reducer";
import { useHistory } from "react-router-dom";

function Subtotal() {
    const history = useHistory();
    const [{basket},dispatch] = useStateValue();
    
    return (
        <div className="subtotal">
            <CurrencyFormat
              renderText={(value) => (
                  <>
                    <p>
                        Subtotal ({basket.length} items):
                        <strong>{{value}}</strong>
                    </p>
                    <small className="subtotal__gift">
                        <input type="checkbox" /> This order contains a gift 
                    </small>
                  </>
              )}
              decimalScale={2}
              value={getBasketTotal(basket)}
              displayType={"text"}
              thousandSeparator={true}
              prefix={"$"}
            />

            <button onClick={e => history.push('/payment')}>Proceed to Checkout</button>
        </div>
    );
}

export default Subtotal