how to return string html as react child

Question

I want to return my string as html for react child assuming string as "<div><span>test</span></div>" and assuming we have a react function component like below:

 function StrToElement({ str }) {  
 const element = new DOMParser().parseFromString(str, "text/html").body.childNodes[0];
 return <pre>{element}</pre>;
}

but the above code throws this error:

Error: Objects are not valid as a React child (found: [object Text])

What is the type of element when you inspect it in the debugger? I’m guessing it’s not a string, which is why React is complaining. — bob
– bob, Commented Apr 10, 2022 at 20:01
when i use console.log(element) it return <div><span>test</span></div> but when i use typeof element it return object — H.hashemi
– H.hashemi, Commented Apr 10, 2022 at 20:03
Right. I’m guessing that’s your problem. I believe you need to to convert element to a string in some way before putting it into a <pre> tag body in that way, which would explain the error. Maybe try setting element to “test” and see if it works, and if so then try converting the original element object to a string (not sure the best way)? — bob
– bob, Commented Apr 10, 2022 at 20:06
i want a way that it work like a html tag not just as string. if i pass it as simple string it will not behave like a real tag — H.hashemi
– H.hashemi, Commented Apr 10, 2022 at 20:12

kwaiks · Accepted Answer · 2022-04-10 20:06:18Z

1

You may use dangerouslySetInnerHTML property inside your element.

It will look like this

 function StrToElement({ str }) { 
   return <div dangerouslySetInnerHTML={{__html: str}}>{element}</div>;
 }

or maybe you could assign it directly without creating new component

Reference

answered Apr 10, 2022 at 20:06

kwaiks

1434 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

H.hashemi Over a year ago

word dangerously refer to =>(it is not safe way)

Collectives™ on Stack Overflow

how to return string html as react child

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related