title: I have this error that say "Cannot update a components while rendering a different component" when I run react.js code
body: <p>I have the error &quot;Warning: Cannot update a component (<code>App</code>) while rendering a different component (<code>Car</code>). To locate the bad setState() call inside <code>Car</code>&quot; when I run my code. If I take out the <code>function removeFromCart(p)</code>, the code is good, but if this function is in App, the code is broken.</p>
  <pre><code>function App() {
  
    const [product, setProduct] = useState({
      product: data.products,
      cartItem:[],
      size: &quot;&quot;,
      sort: &quot;&quot;
    })
  
    const removeFromCart = (p) =&gt; {
      //Copy the recent products in cart
      let cartItems = product.cartItem;
      //Take out the product you choose in cart
      setProduct({
        ...product,
        cartItem: cartItems.filter(x=&gt;x._id!==p._id)
      });
    }
  
    //Add item to the product.cartItem
    const addToCart = (p) =&gt; {
      //Copy what does the cart has
      const cartItems = product.cartItem;
      let inCart = false;
  
      //To check the item you click is in the cart or not
      cartItems.forEach((item) =&gt; {
        if (item._id === p._id) {
          //If in the cart, the item count +1
          item.count++;
          //inCart become true to tell next statement the item you click already in in the cart,
          //WE don't need to push a need item to the cart.
          inCart = true;
        } 
      })
      //If the item you click is not in the cart, 
      //Pushing this to the cart, and set this item's count in 1. 
      if (!inCart) {
        cartItems.push({...p, count:1})
      }
  
      //To renew the cartItem in the product state.
      setProduct({...product, cartItem:cartItems});
    }
  
  
    //To show the items which has the size you choose
    const sizeProducts = (e) =&gt; {
      //value is the size you choose
      let { value } = e.target
      //s is the sort parameter you choose
      let s = product.sort;
  
      //If you didn't choose any size, show all product.
      if (value === &quot;&quot;) {
        setProduct({ size:&quot;&quot;, sort:s, product: data.products });
      } else {
        //If you choose any size, show the product that have the size you choose,
        //and sort it will the sort parameter yuou choose
        setProduct({
          size: value,
          sort:s,
          product: data.products.filter(p =&gt; 
            p.availableSizes.indexOf(value) &gt;= 0
          ).sort((a, b) =&gt; 
            s === &quot;lowest&quot; ? ((a.price &gt; b.price) ? 1 : -1) :
              s === &quot;highest&quot; ? ((a.price &lt; b.price) ? 1 : -1) :
                ((a._id &gt; b._id) ? 1 : -1)
          )
        });
      }
    }
  
    const sortProducts = (e) =&gt; {
      //The value is the sort parameter you choose
      let { value } = e.target;
      //The curr is the product after yiu choose the parameter in the size
      let curr = product.product;
      
      //Sort product
        setProduct({
          sort: value,
          product: curr.sort((a, b) =&gt; 
            value === &quot;lowest&quot; ? ((a.price &gt; b.price) ? 1 : -1) :
              value === &quot;highest&quot; ? ((a.price &lt; b.price) ? 1 : -1) :
                ((a._id &gt; b._id) ? 1 : -1)
          )
        });
      }
      
    
    return (
      &lt;div &gt;
        &lt;Grid xs={ 12 }&gt;
          &lt;Navigation /&gt;
        &lt;/Grid&gt;
        &lt;Grid container&gt;
          &lt;Grid xs={0} sm={2}&gt;&lt;/Grid&gt;
          &lt;Grid container xs={12} sm={8}&gt;
            &lt;Grid item xs={12}&gt;
              &lt;Filter count={product.product.length}
                size={product.size}
                sort={product.sort}
                sizeProducts={sizeProducts}
                sortProducts={ sortProducts}
              &gt;&lt;/Filter&gt;
            &lt;/Grid&gt;
            &lt;Product
              products={product.product}
              addToCart={  addToCart }
            &gt;&lt;/Product&gt;
          &lt;/Grid&gt;
          &lt;Grid xs={0} sm={2}&gt;&lt;/Grid&gt;
        &lt;/Grid&gt;
        
        &lt;div className=&quot;cartSection&quot;&gt;
          &lt;Car cartItems={product.cartItem}
            removeFromCart={ removeFromCart } /&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Car component:</p>
  <pre><code>export default class Car extends Component {
  
      render() {
          const { cartItems } = this.props;
          return (
              &lt;Grid container className=&quot;cart&quot;&gt;
                  &lt;Grid container xs={12}&gt;
                       &lt;Grid xs={12} sm={6} md={3} &gt;
              &lt;div&gt;
                  {cartItems.length === 0 ?
                      (&lt;div&gt;Cart Empty&lt;/div&gt;) :
                      (&lt;div&gt;You have {cartItems.length} in cart&lt;/div&gt;)
                  }
                  
                      {cartItems.map(item =&gt; (
                          &lt;div key={ item._id } className=&quot;cartItem&quot;&gt;
                              &lt;img src={item.image} alt=&quot;&quot; /&gt;
                              &lt;div className=&quot;info&quot;&gt;
                                  &lt;div&gt;
                                      { item.title }
                                  &lt;/div&gt;
                                  &lt;div&gt;
                                      &lt;span&gt;{item.count} X ${item.price}&lt;/span&gt;
                                      &lt;Button
                                          variant=&quot;contained&quot;
                                          color=&quot;primary&quot;
                                          onClick={ this.props.removeFromCart(item) }
                                      &gt;Remove&lt;/Button&gt;
                                  &lt;/div&gt;  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      ))}
                  &lt;/div&gt;
                     &lt;/Grid&gt;
               &lt;/Grid&gt;
          &lt;/Grid&gt;
          )
      }
  }
  </code></pre>
  <p>Error:</p>
  <pre><code>index.js:1 Warning: Cannot update a component (`App`) while rendering a different component (`Car`). To locate the bad setState() call inside `Car`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
      at Car 
      at div
      at div
      at App 
  </code></pre>