CODEWITHSUNDEEP
reactjsreact-hookslinguijs
Parsa Abangah
Parsa Abangah

Reputation: 9

I faced with Invalid hook call on react

Here are my scripts that make a navigator for lingui-js. I faced this error on my local: ×

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 ...react-invalid-hook-call for tips about how to debug and fix this problem.

"react": "^16.8.6", "react-dom": "^16.8.6",

My file: 

import * as React from "react";
import { useLingui } from "@lingui/react";

const Navigation = ({ i18n, locales }) => (
  <select selected={i18n.locale}>
    {Object.keys(locales).map(locale => (
      <option key={locale} onClick={() => i18n.activate(locale)} value={locale}>
        {locales[locale]}
      </option>
    ))}
  </select>
);

export default useLingui(Navigation);

Upvotes: 1

Views: 1543

Answers (2)

shellyyg
shellyyg

Reputation: 111

Sometimes it's also because you do this line: npm install react-i18next i18next --save

under your root directory rather than your client/ (considering your structure: root--client root--api

hence, you have 2 react. Just remove react-i18next & i18next under your package.json @root/ & remove your node_modules & package-lock.json files.

Do npm install react-i18next i18next --save under client/ instead.

Upvotes: 1

Will
Will

Reputation: 1650

Hooks must be used inside of components because of how they are executed by react. They need to store state against a component. You can read more about info how hooks work in this article from Dan Abramov from the React Team.

  1. You can either use the hook inside of another component:
const App = props => {
  const { i18n } = useLingui()
  return <Navigation i18n={i18n} {...props} />
}
  1. Or you can make your own HOC (Higher Order Component) that you can use like in the code you posted:
const withI18n = WrappedComponent => props => {
  const { i18n } = useLingui()
  return <WrappedComponent i18n={i18n} {...props} />
}

The HOC is used like this: 

import * as React from "react";
import { withI18n } from "../withI18n";

const Navigation = ({ i18n, locales }) => (...);

export default withI18n(Navigation);

Upvotes: 1

Related Questions