How to setState onclick for two components in React?-CodePudding

I have created an ecommerce site. Within my Product.js I have an onclick function for each product that pushes the product to local storage and updates the state of the shopping cart. However, my cart.js contains the totals like total products, taxes, total amount...etc. How can I add setState to get them to update when a product is added? I tried adding setState within the return section of the Cart.js but that ended up creating an endless loop of error messages. Below is the code:

import React,{Component} from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faCartPlus} from "@fortawesome/free-solid-svg-icons";





class Products extends Component {
  constructor(props, context) {
   super(props)
   this.state={
    shoppingCart:[]
   }
  }

 
  addToCart=(item)=>{
  
    this.state.shoppingCart.push(item)
    this.setState({shoppingCart:this.state.shoppingCart})
    localStorage.setItem('cart',JSON.stringify(this.state.shoppingCart))

  }
  
  render() {
    
   
    return (
      <div className="container prod-cntr">
        <div className="row prod-row">
          {this.props.products?.map((element) => (
            <div className="col-lg-3 prod-col" key={element.id}>
              <div className="card card-container">
                <img
                  src={element.image}
                  alt="product img"
                  className="prod-img"
                />
                <div className="card-body">
                  <p className="card-title">{element.product}</p>
                  <p className="card-text">{element.description}</p>
                  <p className="prod-price">{element.price}  <FontAwesomeIcon icon={faCartPlus} className="prod-carticon" onClick={()=>{this.addToCart(element)}} /></p>
                  
                </div>
              </div>
            </div>
          ))}
        </div>
        <div>
              </div>
      </div>
    );
  }
}

export default Products;

import React, { Component } from "react";
import plus from "./assets/images/plus.svg";
import minus from "./assets/images/minus.svg";


class Cart extends Component{
    constructor(props){
        super(props)

this.state = {
    totalItems: 0,
    amount:0,
    taxes: 0,
    totalAmount: 0
}
        
    }
    render(){


const cartItems = JSON.parse( localStorage.getItem('cart'));
const totalItems = cartItems?.length || 0;
const amount = cartItems?.reduce((accumulator, object) => {
    return accumulator   object.price;},0) ||0;
const taxes = (amount * 0.065);
 const totalAmount = amount   taxes;

return(<>
<div>
<h2>YOUR CART</h2>
<p>Total Items <span>{this.state.totalItems} </span></p>
<p>Amount <span>{this.state.amount}</span></p>
<p>Total Taxes <span>{this.state.taxes}</span></p>
<p>Total Amount <span>{this.state.totalAmount}</span></p>

<p>Check Out</p>
</div>
      <div className="container prod-cntr">
        <div className="row prod-row">
          {cartItems?.map((element) => (
            <div className="col-lg-3 prod-col" key={element.id}>
              <div className="card card-container">
                <img
                  src={element.image}
                  alt="product img"
                  className="prod-img"
                />
                <div className="card-body">
                  <p className="card-title">{element.product}</p>
                  <p className="card-text">{element.description}</p>
                  <div className = "quantity-container">
                  <img src={minus} className ="minus"/> <p className ="quantity" >QUANTITIY:<span className="qnty-txt"></span></p> <img src={plus} className ="plus"/> 
                 </div>
                 <button onClick={localStorage.removeItem("item")}>Remove From Cart</button> 
                </div>
              </div>
            </div>
          ))}
        </div>
        <div>
        </div>
      </div>

        </>)
    }
}

export default Cart;

CodePudding user response：

I found a very good explanation over here, perhaps it could help to understand why mutating state is a common mistake: https://dev.to/il3ven/common-error-accidentally-mutating-state-in-react-4ndg

CodePudding user response：

you have to create createRef in class component, as you can see the below code I'm using createRef, You have to push the values in this.items and then you have to set the this.items in setState. I hope this would be helpful.

class Products extends Component {
    constructor(props, context) {
     super(props)
     this.state={
      shoppingCart:[]
     }
     this.items = React.createRef([]);
    }
  
   
    addToCart=(item)=>{
      this.items.current.push(item);
      this.setState({shoppingCart: this.items.current})
      localStorage.setItem('cart',JSON.stringify(this.state.shoppingCart))
  
    }
    
    render() {
      
     
      return (
        <div className="container prod-cntr">
          <div className="row prod-row">
            {this.props.products?.map((element) => (
              <div className="col-lg-3 prod-col" key={element.id}>
                <div className="card card-container">
                  <img
                    src={element.image}
                    alt="product img"
                    className="prod-img"
                  />
                  <div className="card-body">
                    <p className="card-title">{element.product}</p>
                    <p className="card-text">{element.description}</p>
                    <p className="prod-price">{element.price}  <FontAwesomeIcon icon={faCartPlus} className="prod-carticon" onClick={()=>{this.addToCart(element)}} /></p>
                    
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div>
                </div>
        </div>
      );
    }
  }
  
  export default Products;