title: Should I use ReactDOMServer.renderToString() or any other way to render a react component to a string?
body: <p>I am extacting a tiny component from a bigger map component on an app using <a href="http://leafletjs.com/" rel="nofollow noreferrer">Leafet</a> and it seems impossible to include the JSX into the html string of Leafet DivIcon.</p>
  
  <p>bigger map component render part:</p>
  
  <pre><code>render () {
    const {tobject, strings} = this.props
  
    let circle = classes.redCircle
  
    if (tobject.lastPoint.activeEvents.ignition) {
      circle = classes.greenCircle
    }
  
    const icon = new window. L. DivIcon({
    html:
    ` &lt;div class= ${classes.tobjecticon}&gt;&lt;span class= ${classes.tobjecticontext}&gt;&lt;div class= ${circle}&gt;&lt;/div&gt;&lt;/span&gt;&lt;/div&gt; `
  })
  </code></pre>
  
  <p>newly extacted component StatusCircle.js:</p>
  
  <pre><code>import React from 'react'
  import classes from './StatusCircle.scss'
  
  export const StatusCircle = ({ status}) =&gt; {
  
    let circle = classes.redCircle
  
    if (status) {
      circle = classes.greenCircle
    }
  
    return (
      &lt;div className={circle} &gt;&lt;/div&gt;
    )
  }
  
  export default StatusCircle
  </code></pre>
  
  <p>My question seems similar to <a href="https://stackoverflow.com/questions/37079847/is-it-ok-to-use-reactdomserver-rendertostring-in-the-browser-in-areas-where-reac">this one</a>. I've tried <strong>renderToString()</strong> of StatusCircle, but using ReactDOM (deprecated there) and not <a href="https://facebook.github.io/react/docs/react-dom-server.html" rel="nofollow noreferrer">ReactDOMServer</a> and it didn't work saying there is no such function. Is it okay to use ReactDOMServer.renderToString() or .renderToStaticMarkup() to achieve this or is it better to leave unchanged without extraction?</p>