Invalid hooks calls in React - reactjs

Question

I have a problem cause I'm getting the userAccess from redux. I need to identify if it is admin or not.
My problem is that its not inside a hook so I can't get the redux value.
here's my code below
Code
import { useSelector } from 'react-redux';
const role = useSelector((state) => state.role);
export default [
{
id: 1,
text: 'Leaders',
url: `/leaders`,
userAccess: true,
},
{
id: 2,
text: 'Users',
url: `/users`,
userAccess: role === 'Admin',
},
];
Code
const Menu = ({ items, isCollapseMenu }) => {
const classes = useStyles();
return (
<div className={classes.root}>
{items.map(
(item) =>
item.userAccess && (
<MenuItem
key={item.id}
title={item.title}
icon={item.icon}
text={item.text}
shortText={item.shortText}
url={item.url}
submenu={item.submenu}
isCollapseMenu={isCollapseMenu}
/>
)
)}
</div>
);
};

Answer 1

You are correct, the useSelector hook can't be used on it's own outside a React functional component or custom React hook.
I suggest you configure your exported menu items to either set userAccess to a boolean or role value, and access your redux state in the Menu component.
Menu items
export default [
{
id: 1,
text: 'Leaders',
url: `/leaders`,
userAccess: true,
},
{
id: 2,
text: 'Users',
url: `/users`,
userAccess: 'Admin',
},
];
Menu
import { useSelector } from 'react-redux';
const checkAccess = (access, role) => {
if (typeof access === 'string') {
return role === access;
};
return access;
};
const Menu = ({ items, isCollapseMenu }) => {
const classes = useStyles();
const role = useSelector((state) => state.role);
return (
<div className={classes.root}>
{items.map(
(item) =>
checkAccess(item.userAccess, role) && (
<MenuItem
key={item.id}
title={item.title}
icon={item.icon}
text={item.text}
shortText={item.shortText}
url={item.url}
submenu={item.submenu}
isCollapseMenu={isCollapseMenu}
/>
)
)}
</div>
);
};

Answer 2

You need to run useSelector() in a component or in another hook. You can create a custom hook (useRoles) that returns the array of roles, and use it in the component:
const useRoles = () => {
const role = useSelector((state) => state.role);
return [{
id: 1,
text: 'Leaders',
url: `/leaders`,
userAccess: true,
},
{
id: 2,
text: 'Users',
url: `/users`,
userAccess: role === 'Admin',
},
];
};
Get the items from the useRoles hook:
const Menu = ({ isCollapseMenu }) => {
const items = useRoles();
const classes = useStyles();
return (
<div className={classes.root}>
{items.map(
(item) =>
item.userAccess && (
<MenuItem
key={item.id}
title={item.title}
icon={item.icon}
text={item.text}
shortText={item.shortText}
url={item.url}
submenu={item.submenu}
isCollapseMenu={isCollapseMenu}
/>
)
)}
</div>
);
};