React bootstrap - Invalid hook call

Question

I am using Bootstrap with ReactJS in order to learn the latter.

I want to diplay a Bootstrap Navbar in my app.

My code is the following:

app.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";

function App() {
  return (
    

      
        
          
        // {' React Bootstrap'}
        
      

    
  );
}

export default App;

index.html

index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

But I get:

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

I did some research and people suggest that the error is caused by different version of React. So I run npm ls react but I get only one version:

myapp-frontend@0.1.0 /Desktop/myapp-frontend
└── react@16.10.2

As suggested in comment, if I run npm ls react-dom I get this:

myapp-frontend@0.1.0 /Desktop/myapp-frontend
└── react-dom@16.10.2

user_11487196 · Answer

Can you remove this out of your code please

// {' React Bootstrap'}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from "react-bootstrap";

function App() {
  return (
    

      
        
          
        
      

    
  );
}

export default App;

I think the error is coming from that line

React bootstrap - Invalid hook call

1 Answers