i cant use hooks in react,advice? - reactjs

Question

I'm building a react app and when i started with my first hook function I got this error
react-dom.development.js:16227
Uncaught Error: 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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at Object.throwInvalidHookError (react-dom.development.js:16227:1)
at useState (react.development.js:1622:1)
at MenuWrapper (menuWrapper.jsx:16:1)
at MenuList.jsx:12:1
at Array.map (<anonymous>)
at MenuList (MenuList.jsx:8:1)
at Menu.render (menu.jsx:108:1)
at finishClassComponent (react-dom.development.js:19752:1)
at updateClassComponent (react-dom.development.js:19698:1)
at beginWork (react-dom.development.js:21611:1)
react-dom.development.js:18687
The above error occurred in the <Menu> component:
at Menu (http://localhost:3000/static/js/bundle.js:385:5)
at div
at div
at App (http://localhost:3000/static/js/bundle.js:62087:78)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # react-dom.development.js:18687
react-dom.development.js:26923
Uncaught Error: 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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at Object.throwInvalidHookError (react-dom.development.js:16227:1)
at useState (react.development.js:1622:1)
at MenuWrapper (menuWrapper.jsx:16:1)
at MenuList.jsx:12:1
at Array.map (<anonymous>)
at MenuList (MenuList.jsx:8:1)
at Menu.render (menu.jsx:108:1)
at finishClassComponent (react-dom.development.js:19752:1)
at updateClassComponent (react-dom.development.js:19698:1)
at beginWork (react-dom.development.js:21611:1)
this is my package.json
{
"name": "jonathan",
"version": "0.1.0",
"private": true,
"type": "module",
"dependencies": {
"#babel/runtime": "^7.5.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"airbnb-prop-types": "^2.16.0",
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"create-webpack-config": "^0.2.1",
"html-webpack-plugin": "^5.5.0",
"jquery": "^3.6.1",
"mdb-react-ui-kit": "^4.2.0",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-bootstrap-accordion": "^1.0.0",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-onclickout": "^2.0.8",
"react-outside-click-handler": "^1.3.0",
"react-router": "^6.4.2",
"react-router-dom": "^6.4.2",
"react-script-tag": "^1.1.2",
"react-scripts": "^5.0.1",
"type-fest": "^3.1.0",
"webpack-dev-server": "^4.11.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/node": "^7.20.0",
"#babel/preset-env": "^7.19.4",
"#babel/preset-react": "^7.18.6",
"web-vitals": "^3.0.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
Finally, the .jsx page that I used the usestate.
import React, { useState }from "react";
import Area from "../ReadFolder/geographicMainComponents/areaMainComponent.jsx";
import City from "../ReadFolder/geographicMainComponents/cityMainComponent.jsx";
import Country from "../ReadFolder/geographicMainComponents/countryMainComponent.jsx";
import Neighborhood from "../ReadFolder/geographicMainComponents/neighborhoodMainComponent.jsx";
import Region from "../ReadFolder/geographicMainComponents/regionMainComponent.jsx";
import { default as AreaW} from "../WriteFolder/geographicMainComponents/areaMainComponent.jsx";
import { default as CityW} from "../WriteFolder/geographicMainComponents/cityMainComponent.jsx";
import { default as CountryW} from "../WriteFolder/geographicMainComponents/countryMainComponent.jsx";
import { default as NeighborhoodW} from "../WriteFolder/geographicMainComponents/neighborhoodMainComponent.jsx";
import { default as RegionW} from "../WriteFolder/geographicMainComponents/regionMainComponent.jsx";
export function MenuWrapper(type,id,isEdit){
let [edit,setEdit] = useState(isEdit);
if(isEdit){
if(type==='country'){
return(
<div>
<div className={edit ? 'd-block' :'d-none'}><CountryW id={id}/><button onclick={() => setEdit=false}>read</button></div>
<div className={edit ? 'd-none' : 'd-block'}><Country id={id} /><button onclick={() => setEdit=true}>edit</button></div>
</div>
);
}
else{return(<div></div>)}
}
else{return(<div></div>)}
}
sorry, this is so long. please note I tried deleting the package_lock,json and node modules. then I tried npm start and even added a --force.that didn't resolve the issue.
For where I called it
import React,{Component} from "react";
import { MenuWrapper } from "./menuWrapper.jsx";
export function MenuList(Items,kind){
if(Items===null){
return(<div></div>)
}
return(
<div>
{
Items.map((item)=>{
return(
MenuWrapper(kind,item.id,false)
)
})
}
</div>
);
}

Answer 1

hooks can be called only within react components. MenuWrapper is not a react component (you are not invoking it as <MenuWrapper />).
You should use it as a component:
return (
<MenuWrapper kind={kind} id={item.id} ...otherProps />
);
and then:
export function MenuWrapper({ kind, id, isEdit }) {
// do stuff
}