使用reactjs（JSX）的bootstrap popover

Question

I am trying to use bootstraps popover button with html inside it, but I get Unexpected token errors when building the JSX.

Here is what I want to do in JSX:

<button type="button" className="btn btn-secondary" data-container="body"
        data-toggle="popover" data-placement="bottom"
        data-content="<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>">
        data-html="true"
        Popover on bottom
 </button>

But react doesn't like building data-content:

data-content="<button type="button" className="btn btn-danger pull-xs-left"

Throws: Unexpected token

> 1265 |                                     data-content={"<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>"}>
       |                                                                  ^

How do I get around this? I'd like to not use jquery preferably.

Answer 1

There is nested ' " ',you need to use this way

<button type="button" className="btn btn-secondary" data-container="body"
    data-toggle="popover" data-placement="bottom"
    data-content='<button type="button" className="btn btn-danger pull-xs-left" data-dismiss="modal">Delete</button>'
    data-html="true"
    Popover on bottom