search

react-bootstrap / react-bootstrap

Bootstrap components built with React
https://react-bootstrap.github.io/
MIT License
22.39k stars 3.6k forks source link

Using Bootstrap Popovers in React without JSX #1112

Closed vgoklani closed 9 years ago

vgoklani commented 9 years ago

I'm trying to re-create this example without JSX:

http://react-bootstrap.github.io/components.html#popovers-overlay-trigger

In particular, this line is causing me a headache:

 <OverlayTrigger trigger='click' placement='left' overlay={<Popover title='Popover left'><strong>Holy guacamole!</strong> Check this info.</Popover>}>
      <Button bsStyle='default'>Holy guacamole!</Button>
 </OverlayTrigger>

and my (more verbose) version:

React.createElement("div", {id:"some_id"},
    React.createElement(ReactBootstrap.OverlayTrigger, {container:"#some_id" , trigger:'click', placement:'left', overlay:
        React.createElement(ReactBootstrap.Popover, {'title':'Popover left'},
            React.createElement("strong", {}, "Check this info.")
        )
    })
)

The keyword "overlay" has me confused, as I'm not clear on how to rewrite it. I'm also unclear as to how to properly attach the mountNode to the parent div element, "#some_id". document.getElementbyId() doesn't work.

This is the error message I get when running the above:

Uncaught Error: Invariant Violation: onlyChild must be passed a children with exactly one child.
jquense commented 9 years ago

you forgot the button. why don't you just plug it into: https://facebook.github.io/react/jsx-compiler.html

AlexKVal commented 9 years ago

or babeljs.io/repl :cherries: