CODEWITHSUNDEEP
reactjsreact-bootstrap
user1250264
user1250264

Reputation: 905

react js popover overlay not working. Getting 'React.createElement type is invalid expected a string

I am trying to get a react-bootstrap working for popover and overlaytrigger working. I have multiple buttons and like to call a function to get popover formatting for each button. I am getting the following error

"React.createElement: type is invalid -- expect a string"

I look at the react example over and over again, still stuck on this error https://react-bootstrap.github.io/components/overlays/#popover-examples

here is my code so far

render() {
  return (

  <OverlayTrigger trigger="click" placement="top" 
    overlay={this.Overlay()}>
    <Button>Test</Button>
  </OverlayTrigger>
  );
}

Overlay = () => {
  const popover = (
    <Popover id="1">
      <Popover.Title as-"h3">Title One</Popover.Title>
      <Popover.Content>Test Content
      </Popover.Content>
    </Popover>
  );
  return popover;
}

Upvotes: 1

Views: 2293

Answers (3)

Niket Malik
Niket Malik

Reputation: 1105

First of all this.Overlay() is incorrect becasue:

  1. You are already calling the function, something like () => this.Overlay() or Overlay.bind(this) will make sense.
  2. this has no property Overlay on it since it's defined outside.

Regarding the issue, your code seems fine, just a small typo as-"h3" should be as="h3" and make Overlay a const or optionally a function.

Example:

const Overlay = () => {
  const popover = (
    <Popover id="1">
      <Popover.Title as="h3">Title One</Popover.Title>
      <Popover.Content>Test Content</Popover.Content>
    </Popover>
  );
  return popover;
};

class Example extends React.Component {
  render() {
    return (
      <OverlayTrigger trigger="click" placement="top" overlay={Overlay}>
        <Button>Test</Button>
      </OverlayTrigger>
    );
  }
}

You can check it out in sandbox her: https://codesandbox.io/s/infallible-proskuriakova-jgkre

Upvotes: 1

Esteban Diez
Esteban Diez

Reputation: 1

That should work if you call a const instead of the function. I've managed to avoid the error but when the button is clicked, the popover is not being shown.

this is placed at the top of my React Component

<OverlayTrigger
  trigger="click"
  placement="top"
  overlay={PopoverCustomer}>
  <Button variant="secondary">OK</Button>
</OverlayTrigger>

and then I declare this const

const PopoverCustomer = () => (
<Popover>
  <Popover.Title>
    Title
  </Popover.Title>
  <Popover.Content>
    Some content here
  </Popover.Content>
</Popover>
);

Upvotes: 0

Eneias Silva
Eneias Silva

Reputation: 214

If Overlay is s functional component, you should use the tag instead of calling the function on OverlayTrigger. React will call the function when rendering the component.

Try

overlay={<Overlay/>}

Upvotes: 0

Related Questions