title: How can I embed a react component in HTML (article body)?
body: <p>I'm developing a blog using react, the articles body are saved in database as HTML (hundred of articles ) so I basically fetch the data and use <code>&lt;div dangerouslySetInnerHTML={{ __html: data.body}}&gt;&lt;/div&gt;</code>.</p>
  <p>Which is kinda fine till the client wanted to show a <code>&lt;Slider /&gt;</code> or any other component in the middle of the article body.</p>
  <p>My current approach is:</p>
  <ol>
  <li><p>The Editors can type a code <code>[slider][/slider]</code> in any part of the article body</p>
  </li>
  <li><p>At the front end, I replace each code with the corresponding component</p>
  </li>
  </ol>
  <pre><code> function ReplaceCodesWithComponents({body}) {
  
    return body.replace(/\[.+?\]\[\/\w+?\]/g, (code) =&gt; {
  
      // code=[slider][/slider]
      let extractedType = code.match(/(?&lt;=\[\/)\w+(?=\])/g);
    
      if (!extractedType) {
        return code;
      }
  
      // [&quot;slider&quot;]
      extractedType = extractedType[0];
  
      // &quot;slider&quot;
      switch (extractedType) {
        case &quot;slider&quot;:
          return &lt;Slider /&gt;;   // this doesn't work 
        case &quot;products&quot;:
          return &lt;Products /&gt;;  // this doesn't work 
        case &quot;gallery&quot;:
          return &lt;Gallery /&gt;;  // this doesn't work  
        default:
          return &quot;&quot;;
      }
    });
  }
  </code></pre>
  <p>How can I achieve something like that?
  Or is that even a good approach?</p>
  <p>And if it's a good approach, is it good to perform this process when saving the article in the database?
  Or perform it every time when a user visit the article?</p>