Stack Exchange
Cannot update component when rendering a diffrent one (useState)
I'm trying to perform a useState from a child component, but a warning is triggered, and so my state is not updated.
The error :

Cannot update a component (`GetProduct`) while rendering a different component (`PageMenu`). To locate the bad setState() call inside `PageMenu`


I have only one setState trigger by useState hooks in my GetProduct component.
GetProduct component:

export const GetProduct: React.FC<Props> = () => {

    let data = RecovData()
    console.log(data.formationData)

    const groupedByCategories = lodash.groupBy(data.formationData,
        function (form) {
            return form.categorie;
        })

    const categories = Object.keys(groupedByCategories);

    console.log('0', categories.length)

    const [currentCategory, setCurrentCategory]: [null | string, Function] = useState(null)


    useEffect(() => {
        if (categories.length > 0) {
            setCurrentCategory(categories[0])
        }
    }, [categories])


    console.log('current', currentCategory)
    if (currentCategory != null) {
        return (
            <div>
                <PageMenu
                    categories={categories}
                    setCurrentCategory={setCurrentCategory}
                />
                <MainCard
                    currentCategory={currentCategory}
                    formationData={data.formationData}
                    catalog={data.catalog}
                    shopId={data.shopId}
                    viewer={data.viewer}
                />
            </div>
        );
    }
    return null
};


PageMenu where is used useState:
interface Props {
    categories?: string[],
    setCurrentCategory?: Function,
}

export const PageMenu: React.FC<Props> = (props) => {

    const categories = props.categories;
    const setCategory = props.setCurrentCategory;

    return (

        <PageHeader
            className="product-page-header"
            title="Découvrir toutes nos formations"
        >
            <Menu className="page-menu_wrapper" mode="horizontal" defaultSelectedKeys={['0']}>
                {categories.map((categorie, index) => {
                    console.log('ici', categorie)
                    return (
                        <Menu.Item
                            key={`${index}`}
                            className={"left-menu_item"}
                            onClick={setCategory(categorie)}
                        >
                            <Link to={`/`}>{categorie}</Link>
                        </Menu.Item>
                    )
                })}
            </Menu>
        </PageHeader>
    )
}

Hope you can help me, thanks you

Change onClick={setCategory(categorie)} to onClick={() => setCategory(categorie)}. The former calls setCategory already while the component is being rendered (which is what the error says), not when the item is clicked. You have to pass a function to onClick, not call the the function and pass its return value.

Ho god it was a so stupid error, thank you!

Can you answer out of comment, I can't tag this post as solved
