Issue with react-bootstrap popover

Question

I'm attempting to create a popover and the popover example provided by react-bootstrap docs is not working. I've attempted to make various tweaks to solve but am stuck.

import React from "react"
import Popover from "react-bootstrap/Popover"
import OverlayTrigger from "react-bootstrap/OverlayTrigger"
import Button from "react-bootstrap/Button"

class PopoverExample extends React.Component {
  render() {
    return (
      const popover = () => (
        <Popover id="popover-basic">
          <Popover.Title as="h3">Popover right</Popover.Title>
          <Popover.Content>
            And here's some <strong>amazing</strong> content. It's very engaging.
            right?
          </Popover.Content>
        </Popover>
      );

      const Example = () => (
        <OverlayTrigger trigger="click" placement="right" overlay={popover}>
          <Button variant="success">Click me to see</Button>
        </OverlayTrigger>
      );
    )
  }
}

**The error message I receive is:**

 Line 9:  Parsing error: Unexpected token

   7 |   render() {
   8 |     return (
>  9 |       const popover = () => (
     |       ^

Answer 1

Actually you have mixed class component and functional component,

Your complete component should be like this,

import React from "react"
import Popover from "react-bootstrap/Popover"
import OverlayTrigger from "react-bootstrap/OverlayTrigger"
import Button from "react-bootstrap/Button"


const popover = () => (
  <Popover id="popover-basic">
    <Popover.Title as="h3">Popover right</Popover.Title>
    <Popover.Content>
      And here's some <strong>amazing</strong> content. It's very engaging.
      right?
    </Popover.Content>
  </Popover>
);

const Example = () => (
  <OverlayTrigger trigger="click" placement="right" overlay={popover}>
    <Button variant="success">Click me to see</Button>
  </OverlayTrigger>
);

export default Example

Example is your actual component and now you can export it, and use wherever you want.