Ad

How To Render A React Component Inside A Bootstrap Popover

- 1 answer

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 target="_blank" rel="nofollow noreferrer" 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.

Ad

Answer

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).

Ad
source: stackoverflow.com
Ad