Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM) You might be breaking the Rules of Hooks You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.

navconfig.js

  import React, { useState, useEffect } from 'react';
    import { useSelector } from 'react-redux';
    // component
    import Iconify from '../../components/Iconify';
    
    // ----------------------------------------------------------------------
    
    const getIcon = (name) => <Iconify icon={name} width={22} height={22} />;
    
      //get data from signup page
      const [state, setState] = useState({
        email: '',
        password: '',
      });
    
      const { email, password } = state;
    
      const { currentUser } = useSelector((state) => state.user);
      // console.log('currentuser', JSON.parse(currentUser).email)
    
      useEffect(() => {
    
    const email = currentUser  ? JSON.parse(currentUser).email : null; 
        if (email == "[email protected]") {
          const navConfig = [
            {
              title: 'dashboard',
              path: '/dashboard/app',
              icon: getIcon('eva:pie-chart-2-fill'),
            },
            {
              title: 'user',
              path: '/dashboard/user',
              icon: getIcon('eva:people-fill'),
            },
            {
              title: 'product',
              path: '/dashboard/products',
              icon: getIcon('eva:shopping-bag-fill'),
            },
            {
              title: 'blog',
              path: '/dashboard/blog',
              icon: getIcon('eva:file-text-fill'),
            },
            {
              title: 'calender',
              path: '/dashboard/calender',
              icon: getIcon('uis:calender'),
            },
            {
              title: 'login',
              path: '/login',
              icon: getIcon('eva:lock-fill'),
            },
            {
              title: 'register',
              path: '/register',
              icon: getIcon('eva:person-add-fill'),
            },
            {
              title: 'Not found',
              path: '/404',
              icon: getIcon('eva:alert-triangle-fill'),
            },
          ];
        }else
        {
          const navConfig = [
            
            {
              title: 'user',
              path: '/dashboard/user',
              icon: getIcon('eva:people-fill'),
            },
            {
              title: 'product',
              path: '/dashboard/products',
              icon: getIcon('eva:shopping-bag-fill'),
            },
            {
              title: 'blog',
              path: '/dashboard/blog',
              icon: getIcon('eva:file-text-fill'),
            },
            {
              title: 'calender',
              path: '/dashboard/calender',
              icon: getIcon('uis:calender'),
            },
            {
              title: 'login',
              path: '/login',
              icon: getIcon('eva:lock-fill'),
            },
            {
              title: 'register',
              path: '/register',
              icon: getIcon('eva:person-add-fill'),
            },
            {
              title: 'Not found',
              path: '/404',
              icon: getIcon('eva:alert-triangle-fill'),
            },
          ];
        }
      }, [currentUser]);
      
      
    
    
    export default navConfig;

CodePudding user response：

You should not using hook outside of components I think. You can read more here: https://en.reactjs.org/warnings/invalid-hook-call-warning.html

CodePudding user response：

Dont use hook outside of component, we can know that hook is started with 'use' e.g: useState, useeffect. Hook can only use in a component, component is like

const ThisIsAComponent = () => {return(<div>something you want</div>)}

so if you want use hook you must do like this

const ThisIsAComponent = () => {                                    
   const [value, setvalue]=useState()    


                                         
   return(<div>something you want</div>)}

if you use hook like this

const [value, setvalue]=useState()//this hook obviously outside of component                                  
 const ThisIsAComponent = () => {                                    
     
                                         
   return(<div>something you want</div>)} 
                                                                                  

it will throw the error that you got