Invalid hook call. Hooks can only be called inside

Question

I just created a new app,I'm starting to learn react but I'm ready to give up....just before I do want to share my code:

index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

APP.js:

import logo from './logo.svg';
import './App.css';
import Navigation from './component/Navigation';

function App() {
  return (
    <div className="App">
      <header className="App-header">
<Navigation/>        
      </header>
    </div>
  );
}

export default App;

Navigation.jsx:

import React, { Component } from 'react';
import { Navbar, Nav, NavDropdown, Container } from 'react-bootstrap';

class Navigation extends Component {

    render() {
        return (
            <Navbar collapseOnSelect expand="lg" bg="white" >
                <Container>    </NavDropdown>
                    </Nav>
                    <Nav>
                        <Nav.Link href="#deets">More deets</Nav.Link>
                        <Nav.Link eventKey={2} href="#memes">
                            Dank memes
  </Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Container>

        </Navbar>
);
    }
}
export default Navigation;

Please let me know where is the problem,I also have seen a similar question with no answer...

The code looks reasonable, but I don't see where any hooks are being used - since that's where the error is, please include the location of the hook call in the question — CertainPerformance, Dec 23 '20 at 16:48
please find a function that starts with `use` and post that code here so we can solve it — Nisharg Shah, Dec 23 '20 at 16:53
@CertainPerformance thats all the code,I only have index.js app.js and in component folder navigation.jsx — PureAbap, Dec 23 '20 at 16:54
I think you had two instances of react running at the same time. Surprisingly this did not come to my attention until I tried using react-bootstrap. In my case I installed react via npm while still having the react — Nisharg Shah, Dec 23 '20 at 16:59
@NishargShah let me test,I am installing react boostrap trough npm and will delete the refernce — PureAbap, Dec 23 '20 at 17:03
He also has a before the
element in Navigation.jsx, but this should be a syntax error, not a hook related one. — zhulien, Dec 23 '20 at 17:06
@NishargShah I just installed react through npm and it works now ,even though the style is not okay but I am not getting anymore that error...the closing tag is okay — PureAbap, Dec 23 '20 at 17:06
@NishargShah thanks a lot..aperently I only needed to add boostrap even though I have alredy added in the roor folder — PureAbap, Dec 23 '20 at 17:07

zhulien · Answer 1 · 2020-12-23T17:01:29.293

Like @CertainPerfomance already noted, you aren't using any hooks in the code provided. Nevertheless, if you get the 'Invalid hook call' error, you're either trying to call a hook from non-functional component(or in other words - a class component) or maybe you're trying to call it in a loop/conditional statement, which breaks the rules for hook usage. Also, you might be importing React twice. Checkout this official page which should give you some additional information about the specific error.

You will most probably fix your error if you convert your components to functional ones.

EDIT: After your update, also checkout this: Invalid hook call. Hooks can only be called inside of the body of a function component.

score 0 · Accepted Answer · answered Dec 23 '20 at 17:09

I think you had two instances of react running at the same time. Surprisingly this did not come to your attention until you tried using react-bootstrap. In that case, you installed react via npm while still having the react tag in my master template (obviously resulting in embedding the react code twice).

Invalid hook call. Hooks can only be called inside

2 Answers2