CODEWITHSUNDEEP
javascriptreactjs
The IT gal
The IT gal

Reputation: 215

I am getting "Invalid hook call" error after using useState in my project

I am pretty new to React and I am trying to implement the switching tabs in react using Material ui. Any help will be appreciated. This is the error I am getting

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

I have already tried updating react and react-dom using this:

npx create-react-app newhook and then yarn add react@next and yarn add react-dom@next

This is where I have user useState

     render() {
        const { classes, theme } = this.props;
        const [value, setValue] = React.useState(0);
        return (some code..)
    }

This is my package.json file

{
  "name": "admin-jobseeker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.2.0",
    "@material-ui/icons": "^4.2.1",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "react-swipeable-views": "^0.13.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Upvotes: 4

Views: 6467

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53994

You are mixing classes and hooks, refer to hook Docs

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

// Use functions for hooks, not classes
function App(props) {
  const { classes, theme } = props;
  const [value, setValue] = React.useState(0);
  return <div>{value}</div>;
}

Upvotes: 2

Related Questions