React.js: Is it possible to convert a react component to HTML DOM's?

You could also use React's renderToString() method

_renderInfoWindow: function(place) {
  return React.renderToString(
    <div>
      <h4>{place.name}</h4>
      <p>{place.cost}</p>
      <button className="btn btn-danger btn-block" onClick={this.props.addList.bind(this, place)}>I want to go here !! </button>
    </div>
  );
}

This should work for a simple component as shown. React.renderToString() will return only the html for the component.

For newer versions of React

import ReactDOMServer from "react-dom/server";

let html = ReactDOMServer.renderToString(<div>...</div>)

This is how it's supposed to be done in React 18:

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // For example, "<svg>...</svg>"

The main part I was missing while trying to migrate to React 18 was the flushSync part. Before adding it my innerHtml always returned empty string.

According to this post: https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code

The flushSync call is necessary so that the DOM is updated before reading its innerHTML property.

Also, renderToString and importing react-dom/server into the browser is still not recommended.

This should render the HTML.

import ReactDOMServer from "react-dom/server";

const html = ReactDOMServer.renderToString(<div>...</div>)

Alexandre's method is now deprecated and was never idiomatic. This is the new way, written idiomatically:

createMarker: function() {

  /** Some other lines of code */

  _this = this;

  google.maps.event.addListener(marker, 'click', function() {

    var div = document.createElement('div');
    const root = ReactDOM.createRoot(div)
    root.render(<InfoWindow place={place} addList={...} />));
    infowindow.setContent(div);
    infowindow.open(map, this);

  });

},

// my infowindow rendering method
function InfoWindow ({ place, addList }) {
  return(
    <div>
      <h4>{place.name}</h4>
      <p>{place.cost}</p>
      <button className="btn btn-danger btn-block" onClick={() => addList(place)}>I want to go here !! </button>
    </div>
  )
},

Notice the mixing of JSX into the click handler and the extraction of InfoWindow into its own component: idiomatic React.

The next issue to fix is the creation of multiple roots on the same node. This can be fixed by keeping in to a single, shared one:

constructor() {
  this.infoWindowDiv = document.createElement('div');
  this.infoWindowReactRoot = ReactDOM.createRoot(this.infoWindowDiv)
}

and later...

this.infoWindowReactRoot.render(<InfoWindow place={place} addList={...} />));

// Create a DOM element to hold the react component.
var span = document.createElement('span');
// Render the React component.
React.render(h.button(null, 'Buttonz!'), span);
// This will give the result as a string, which is useful if you've escaped
// React's context (e.g. inside DataTables).
// Obviously, the component will no longer be reactive but this is a
// good way to leverage simple stuff you've already written in React.
// In my case, I'm primarily leveraging React wrappers around Bootstrap components.
// The important thing is that componentDidMount gets called.
return span.outerHTML;