Displaying Popover After Clicking On An Event In React-big-calendar

I created the Event () function that it passes as a custom component to Then in the Event () function I create the variable p

Solution 1:

There is no issue with the Javascript code you posted. It's a CSS issue

You have included multiple bootstrap css versions (bootstrap 4 and 3) and the react-bootstrap package version is 0.32 which works well, only with bootstrap 3

Remove bootstrap 4.3.1 reference from the html as its not compatible with the react-bootstrap package you are using.

Change..

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous"
/>
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

to

<link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />

I have added the working stackblitz link as a comment.