How can I insert a React component inside an HTML string and then render it with dangerouslySetInnerHTML?

Question

I'm using NextJs. I have an html string that is fetched from the server. It represents a blog post and contains several <img> tags. I'm currently rendering the post like this:

const blogpostHtml = "..." // an html string that comes from the server
return (
  ...
  <div
    dangerouslySetInnerHTML={{__html: blogpostHtml}}
  />
  ...
)

And it works fine. However, I'd like to add functionality to the images. I found this library that accomplishes what I want with an uncontrolled component:

  ...
  <Zoom>
    <img
      alt="some alt"
      width="500"
      src="the image url"
    />
  </Zoom>
  ...

However, I noticed that I can't simply insert the Zoom tags because it's interpreted as a raw html tag instead of a component. And if I try to render it to a string it loses functionality.

let html = ReactDOMServer.renderToString(
  <Zoom>
    <img
      alt="some alt"
      width="500"
      src="the image url"
     />
   </Zoom>
 )

 return (
   ...
   <div
     dangerouslySetInnerHTML={{__html: html}}
   />
   ...
)

As you can see in the image, the resulting html is the same as using the Zoom component as intended, but the button loses its event

So how can I combine the html string from the server and the uncontrolled Zoom component to achieve what I want?

I think you will be able to find everything you need in this thread. stackoverflow.com/questions/36978767/… — William Scalabre
– William Scalabre, Commented Apr 29, 2020 at 18:59

Arturo Cuya · Accepted Answer · 2020-04-30 16:50:30Z

Thanks to William's answer in the comments I got this solution

import Zoom from 'react-medium-image-zoom'
import ReactDOM from 'react-dom'
import { useEffect } from 'react'

  const Index = () => {
   const html = ` 
   <p>This is some text</p>
     <img src="some-img-src.jpg"/>
   <p>More text here</p>
   `

   useEffect(() => {
     // 1. extract imgs and src
     const imgs = document.getElementsByTagName('img')
     const srcArray = Array.from(imgs).map(img => img.src)

     // 2. wrap images with div then replace each div using ReactDOM.render
     for (let i = 0; i < imgs.length; i++) {
       const wrapper = document.createElement('div')
       wrapper.setAttribute('id', `img-${i}`)

       imgs[i].parentNode.insertBefore(wrapper, imgs[i])
       wrapper.appendChild(imgs[i])

       ReactDOM.render(
         <Zoom>
           <img src={srcArray[i]} />
         </Zoom>,
         document.querySelector(`#img-${i}`)
       )   
     }   
   }, []) 

    return (
     <>  
        <div
          dangerouslySetInnerHTML={{
            __html: html
          }}  
        />
      </> 
    )
  }

  export default Index

Collectives™ on Stack Overflow

How can I insert a React component inside an HTML string and then render it with dangerouslySetInnerHTML?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related