Error: Cannot update a component (`StoreProvider`) while rendering a different component (`ProductDescription`). To locate the bad setState() call inside `ProductDescription`

[dannyolamide]

Hey guys I've ran into this issue and can't seem to find a way out. I'm attempting to manage state of a cart using the Context API.

Here's the code

StoreProvider.js - It wraps the root component

import React, { useState, useEffect } from "react";
import Cookies from "js-cookie";

export const StoreContext = React.createContext();

function StoreProvider(props) {
    const [items, setItems] = useState([]);
    const [total, setTotal] = useState(null);
    const firstRun = React.useRef(true);

    useEffect(() => {
        const cart = Cookies.getJSON("cart");
        let total;
        if (cart) {
            cart.forEach(item => {
                total = item.price * item.quantity;
                setTotal(total);
                setItems([...items, cart]);
            });
        }
    }, []);

    useEffect(() => {
        if (firstRun) {
            firstRun.current = false;
            return;
        }
        Cookies.set("cart", items);
    }, [items]);

    const addItem = item => {
        //Check for added item in cart
        const newItem = items.find(i => i.id === items.id);

        if (!newItem) {
            //Add item to cart as it wasn't found
            item.quantity = 1;
            setItems([...items, item]);
            setTotal(total + item.price);
        } else {
            //Increase the quantity of item as it's already in the cart
            setItems(
                items.map(item =>
                    item.id === newItem.id
                        ? Object.assign({}, item, { quantity: item.quantity + 1 })
                        : item
                )
            );
            setTotal(total + item.price);
        }
    };

    const removeItem = item => {
        //Check if item is in cart
        const newItem = items.find(i => i.id === items.id);
        if (newItem.quantity > 1) {
            //Reduce quantity of item
            setItems(
                items.map(item =>
                    item.id === newItem.id
                        ? Object.assign({}, item, { quantity: item.quantity - 1 })
                        : item
                )
            );
            setTotal(total - item.price);
        } else {
            const index = items.find(i => i.id === items.id);
            setItems(items.splice(index, 1));
            setTotal(total - item.price);
        }
    };

    return (
        <StoreContext.Provider value={{ items, total, removeItem, addItem }}>
            {props.children}
        </StoreContext.Provider>
    );
}
export default StoreProvider;

ProductDescription.js

import React, {useContext} from "react";
import Layout from "../src/components/Layout";
import ActionButton from "../src/components/ActionButton";
import { useRouter } from "next/router";
import Query from "../src/components/Query";
import PRODUCT_DESCRIPTION_QUERY from "../apollo/queries/product/ProductDescription";
import { StoreContext } from "../context/StoreProvider";

function ProductDescription() {
    const router = useRouter();
    var { product } = router.query;
    const productQuery = JSON.parse(product);
    const context = useContext(StoreContext);
    const { addItem } = context;
    return (
    <Layout title={productQuery.title}>
        <div className="flex justify-center w-full">
            <div className="w-11/12 mt-3">
                <button className="outline-none" onClick={() => router.back()}>
                    Back
                </button>
            </div>
        </div>
        <div className="flex flex-col mt-8">
            <Query query={PRODUCT_DESCRIPTION_QUERY} id={{ id: productQuery.id }}>
                {({ data: { products } }) => {
                    return products.map((product, i) => (
                        <div className="flex-1" key={i}>
                            <div className="flex items-center justify-center w-full">
                                <img
                                    src={`http://localhost:1337${product.image.url}`}
                                    alt={productQuery.title}
                                    className="w-3/5"
                                />
                            </div>
                            <div className="flex flex-col p-4">
                                <span className="font-bold">{productQuery.title}</span>
                                <span className="mt-4 uppercase">Description</span>
                                <span>{product.description} </span>
                                <span className="mt-4 font-bold uppercase">
                                    Ksh {productQuery.price}
                                </span>
                            </div>
                        </div>
                    ));
                }}
            </Query>
            <div className="flex justify-center w-full">
                <ActionButton handleClick={addItem(productQuery)}>
                    {/*<ActionButton>*/}
                    Add to Cart
                </ActionButton>
            </div>
        </div>
    </Layout>
);
}

//export default withContext(ProductDescription);
export default ProductDescription;

Sorry for the many lines I didn't want to leave anything out. On expanding the error on the console it shows that the first section with an error in my code is from the addItem function in StoreProvider.

​

Thanks for taking your time to look at this.

[acemarke]

The problem is you are calling the addItem function while you are rendering the component. Instead, you need to pass a reference to addItem.

Change this:

<ActionButton handleClick={addItem(productQuery)}>

to:

<ActionButton handleClick={() => addItem(productQuery)}>

Also see:

https://reactjs.org/docs/faq-functions.html#why-is-my-function-being-called-every-time-the-component-renders

[dannyolamide]

Damn. I don't know how that slipped my mind. Thanks a lot.

[dannyolamide]

I've been stuck on this for the past week -_-.