CODEWITHSUNDEEP
reactjsreact-bootstrap
Charles L.
Charles L.

Reputation: 1970

React React-Bootstrap popover

Trying to mimic the popover example at React-Bootstrap. Im fairly new to react and cant understand why im getting an error here which seems fairly broad and I cant seem to pin point it down. My react company code:

import React, { Component } from 'react';
import { Popover, OverlayTrigger, Button } from 'react-bootstrap';

import '../styles/headerPortfolio.css';

class HeaderPortfolio extends Component {
  render() {
    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="bottom" overlay={{popover}}>
        <Button variant="success">Click me to see</Button>
      </OverlayTrigger>
    );

    return (
      <Example />
    )
  }
}

export default HeaderPortfolio;

and the console error im receiving:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

codesandbox : CodeSandbox

Upvotes: 0

Views: 1261

Answers (1)

ThanhEngineer
ThanhEngineer

Reputation: 1339

You have an error in popover component, correct it as a function component:

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>
    );

Upvotes: 3

Related Questions