Unable to render Reactjs-boostrap popover

user_1001532 0
Viewed 199

I have the following package installed:

npm install --save react-bootstrap bootstrap

And I am trying to add a popover using an example provided here example.

This is the exact code:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';


function App() {
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">Popover title</Popover.Title>
      <Popover.Content>
        Popover content <strong>some strong content</strong> Normal content again
      </Popover.Content>
    </Popover>
  );
  
 
  return (
    <div className="App">
    <OverlayTrigger trigger="click" placement="right" overlay={popover}>
      <Button variant="success">Click to trigger popover</Button>
    </OverlayTrigger>
    </div>
  );
}

export default App;

But it just doesn't work. I don't see any errors in the console. And the popover does not render at all. What am I missing?

react-bootstrap popover
1 Answers

Probably you just need npm install react-bootstrap bootstrap. That is mentioned on the doc you suggested too.

From this Article,

Before npm 5.0.0, it was necessary to add --save after package name because it 
will save the installed package to package.json file in the dependency section. 
If you are using a recent version of npm save yourself from unnecessary typing 
and use npm install [Package Name] instead of npm install [Package Name] --save 
by default it will add the installed package to the dependency list in the 
package.json file.
user_128114790
Related