CODEWITHSUNDEEP
reactjsreact-hooks
Yoann
Yoann

Reputation: 43

Invalid hooks call on top functional component

I am trying to use Hooks in my 16.14.00 react App. But every time I use one, I get the invalid hooks warning :"https://fr.reactjs.org/warnings/invalid-hook-call-warning.html".invalid hooks call screen

I checked:

What is weird about that is that I CAN use Hooks in other components, it is like React does not accept hooks on my App() functional component.

Here is my code.

import { useState } from 'react';
import Cursor from './cursor';
import CollapsiblePanel from './collapsiblePanel';
import MainPanel from './mainPanel';
import SideBar from './sidebar/sidebar';


export default function App() {
  
    const [cursorGlowing, setCursorGlowing] = useState(false);
    
    const glowCursor = (bool) => {
      setCursorGlowing(false);
    }

    return (
      <div className="app">
        <SideBar glowCursor={() => glowCursor}/>
        <Cursor glow={cursorGlowing}/>
        <CollapsiblePanel/>
        <MainPanel />
      </div>
    )
  }

If anybody already overcame this problem, or if I have misunderstood anything please correct me :) Thanks for the time.

EDIT: I am using this App in my index.js:

import App from './app'
import ReactDOM from 'react-dom';
import '../public/css/MyStyle.css';
import '../public/css/nav.css';

  
  ReactDOM.render(
    App(),
    document.getElementById('root')
  );```

Upvotes: 0

Views: 40

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370859

When you do App(), you're calling it as if it was a normal function, not as a React component. When React sees the call of App, it can't detect that it's being used as a functional component - it just thinks that it's a normal function. Use JSX syntax to call App instead:

ReactDOM.render( <App />, document.getElementById('root') );

(you could also use React.createElement, but JSX syntax is much easier)

Upvotes: 4

Related Questions