React dangerouslySetInnerHTML is rendering [object object] for image prop

Question

     content={
        <span>
          <img className="rounded-circle img_center" 
           src={icon} alt="" />
         </span>
      }

if the content is the prop and that has above image content.

<span dangerouslySetInnerHTML={{ __html: content }} />;

This is rendered as [object object], how this can be handled. Also is there a way to use fragments instead of span tag to render dangerouslySetInnerHTML

Answer 1

in that case you dont need to use dangerouslySetInnerHTML but use this library jsxt-to-string

Answer 2

You're not passing HTML you're passing an object (in this case apparently JSX). When an object is rendered directly as HTML it comes out as [object object]. It'll be the className that's causing it to be read as an object rather than just incorrect HTML.

Use a div rather than span.