nav component losing props. React router mistake?

Question

First time using react router and I am losing props passed to my nav component once I render a new route. Maybe losing props is wrong way of explaining it. What problem is on home page when i add items to cart a badge on the nav updates with correct number of items but when i click checkout they disappear. When I click back to home the badge displays correctly again.

I think i must be something simple because the app worked before I added router.

1. Home works

home works

2. No cart items shown:

no cart items shown:

Notes

— NavMain component not added to a Route because I wanted it displayed on both checkout page and home page

— between the render() and the return code counts amount of items in cart and passes the number to the nav through props note added to state.

I think i did something wrong in App sensing that <.NavMain ... /> needs be in a route?

  class App Extends React.Component {
render() {
/* counts number of items in cart does not add to state */
     const arrayOfQuantities = this.state.cart.map(item => item.quantity);
     const countOfCartItems = arrayOfQuantities.reduce(
      (total, current) => (total += current)
);

return (
  <BrowserRouter>
    <div className="App">

   /** Is this the problem? **/

     <NavMain
        countOfCartItems={countOfCartItems}
        onTermSubmit={this.onTermSubmit}
        handleSearched={this.handleSearched}
        itemsInCartBoolean={this.state.cart.length > 1}
      />

      <Route
        exact
        path="/"
        render={() => (
          <React.Fragment>
            <MainCarousel />
            <WatchList
              cart={this.state.cart}                  
              addCartItem={this.handleAddCartItem}
              watchList={data.products[0].frankMuller}

            />
          </React.Fragment>
        )}
      />
      <Route
        path="/checkout" 
        render={() => <Checkout cart={this.state.cart} />} // used for pricing etc.
      />
    </div>
  </BrowserRouter>
);
}}
export default App;

Checkout component below, I think i'm meant to pass props through to that right? thats not a bootstrap component thats my component which i imported for the checkout I will try pass some props omg fingers crossed. Will try click some buttons.

export default class Checkout extends Component {render() {   
return (
  <div>
    <NavMain />

      <h1 className="main-header">Checkout</h1>
      <h5 className="sub-heading">YOUR ORDER</h5>


           <OrderList
             cart={this.props.cart}
             addCartItem={this.props.addCartItem}
             removeCartItem={this.props.removeCartItem}
            />


);}}

how r u updating the state when the user adds items to the cart? — Syed Osama Maruf
The root App has the cart state. In the above code I put ... inside the <.WatchList but this is the component that I pass the addItemto cart handler. <WatchList cart={this.state.cart} searchTerm={this.state.term} addCartItem={this.handleAddCartItem} watchList={data.products[0].frankMuller} /> I will update OP with checkout Component — Bart

Bart Bart · Accepted Answer · 2018-12-17T20:11:23

Syed knew where to look the problem was the Checkout component I added the NavMain component in there when it was already added inside the root App. I simply deleted it from the Checkout and left root alone.

works now ^^ thanks

nav component losing props. React router mistake?

Notes

1 Answers