How to render jsx / html inside a variable (or support)?

Question

const Footer = () => { let a="<b>Hey</b>" return ( <div> Some bold text: {a} </div> ) } 

This will only display as Some bold text: <b>Hey</b> . How to get bold text in bold? Variable content is my own, so I don't need to worry about that.

Answer 1

You will need to use dangerouslySetInnerHTML

 const Footer = () => { let a= { __html: "<b>Hey</b>" }; return ( <div> Some bold text: <span dangerouslySetInnerHTML={a} /> </div> ) }