Popover content not rendered as HTML when stored in variable

[wphampton]

Any ideas why the HTML content won't render properly in my Popover component if I first store the value in a variable?

This does not work:

var popContent = '<strong>Holy guacamole!</strong> Check this info.';
var popover = <Popover title="Popover right">{popContent}</Popover>;

return ( 
    <OverlayTrigger trigger='click' rootClose placement='right' overlay={popover}>
      <Button bsStyle='xsmall'>Holy guacamole!</Button>
    </OverlayTrigger>
);

Because it generates this:

While this does work:

var popover = <Popover title="Popover right"><strong>Holy guacamole!</strong> Check this info.</Popover>;

return ( 
    <OverlayTrigger trigger='click' rootClose placement='right' overlay={popover}>
      <Button bsStyle='xsmall'>Holy guacamole!</Button>
    </OverlayTrigger>
);

Thanks -- I'm stumped!

[taion]

That's not the way JSX variables work. You'd want e.g.

var popContent = <span><strong>Holy guacamole!</strong> Check this info.</span>

[aterreno]

Not sure why @taion reply got a downvote, that's exactly why the popup doesn't get the html styling, you need a jsx variable