CODEWITHSUNDEEP
twitter-bootstrapreactjs
Datsik
Datsik

Reputation: 14824

How to render a react component inside a bootstrap popover

I'm trying to get a component to render inside of a bootstrap popover:

componentDidMount() {
        $(this.refs.shareLink).popover({
            react: true,
            title: "Share!",
            content: <ShareLinkComponent lobbyid={this.props.lobbyid}/>
        })
    }
.....
<td><a href="#"><i ref="shareLink" className="fa fa-share-square-o"></i></a></td>
.....


class ShareLinkComponent extends Component {
    render() {
        return (
            <div>
                <p>Copy And Share</p>
                <input type="text" value={`${window.location.host}/party/${this.props.lobbyid}`}/>
            </div>
        )
    }
}

So how might I make this work exactly.

Upvotes: 0

Views: 1496

Answers (2)

Jan Klimo
Jan Klimo

Reputation: 4930

For performance and maintainability reasons, migrate your code to React-Bootstrap. It's simple and it will save you a lot of headache in the future.

Upvotes: 0

Michelle Tilley
Michelle Tilley

Reputation: 159105

If you're escaping out of the React world into jQuery-land, you can't use JSX — JSX isn't HTML, it just looks like it.

To convert some JSX into an HTML string that you can pass to jQuery, you could use something like:

    var html = ReactDOMServer.renderToStaticMarkup(
      <ShareLinkComponent lobbyid={this.props.lobbyid} />
    );
    $(this.refs.shareLink).popover({
        react: true,
        title: "Share!",
        content: html
    })

However, the HTML would be completely static; no interactivity that you'd normally find inside ShareLinkComponent would work. For that to happen, you'd need to render a living React component to a DOM node, and then attach the node to the overlay.

If you can, you might look into a React-based solution, such as react-overlays (which React Bootstrap uses).

Upvotes: 1

Related Questions