1

I don't know why I'm receiving this error after running a test.

Invalid hook call. Hooks can only be called inside of the body of a function component.

This is how my code looks like

  23 |
  24 | const LandingPageNew = () => {
> 25 |   const [displayElement, setDisplayedElement] = useState(1);
     |                                                 ^
  26 |
  27 |   const classes = useStyles();
  28 |   function manageIndicatorColors(element, number) {

How you can see I'm using hooks inside function components.

Do you have any ideas why this error is occurring?

I've only one React in my project

$ npm ls react
   root@ C:\Users\szyma\Desktop\MVPs\pyramid_questionnaire_2
          -- client@1.0.0 -> 
   C:\Users\szyma\Desktop\MVPs\pyramid_questionnaire_2\packages\client
          -- react@17.0.1

Edit------------

It's pretty simple. LandingPageNew is imported to App.js

import LandingPageNew from "./react/LandingPageNew";

And then

function App() {
  return (
    <Router>
      <div className='appComponent'>
        {/* <img src={background} className='top-background' /> */}

        <Route path='/' exact component={LandingPageNew} />
        <Route path='/create-account' component={CreateAccountPage} />
        <Route path='/questionnaire' component={LandingPageNew} />
      </div>
    </Router>
  );
}

export default App;

After using it inside App.js everything is by "default"

Adam Szymański
  • 335
  • 4
  • 17
  • You have answer in an `Edit` – Adam Szymański Mar 20 '21 at 18:22
  • Can you post the full code in the `LadingPageNew` file – dglozano Mar 20 '21 at 18:25
  • Here you go [link](https://pastebin.pl/view/a63270bd) – Adam Szymański Mar 20 '21 at 18:28
  • You don't seem to be violating the rules of hooks in that component. So either the problem is somewhere else, or you are mixing up React versions somehow. If you are using `npm link` , this might be the reason https://stackoverflow.com/a/63705440/10648865 – dglozano Mar 20 '21 at 18:42
  • I linked clinet files to correct `node_modules` folder – Adam Szymański Mar 20 '21 at 20:05
  • So you are using `npm link` ? Have you made sure that the library you are linking points to the react version used in the client? In client `cd node_modules/react && npm link` and in your library `npm link react` and then you npm link the client to the library – dglozano Mar 20 '21 at 20:08
  • I didn't used npm link before, but I just run the command in client folder which points to correct React depencie. To make sure that those are correctly pointed to each other – Adam Szymański Mar 20 '21 at 20:14

1 Answers1

0

Every function component I've written has required properties. It's possible it must accept this as an argument for hooks to recognize it. Try changing

const LandingPageNew = () => {

To

const LandingPageNew = (props) => {
Atmas
  • 2,389
  • 5
  • 13