javascriptreactjs

Format error `props.dangerouslySetInnerHTML` must be in the form `{__html: ...}` while trying to dynamically set HTML

I am trying to dynamically render an HTML using a state object, however I keep getting below error:

react-dom.development.js:2952 Uncaught Error: `props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://reactjs.org/link/dangerously-set-inner-html for more information.

My relevant code looks as below:

...
const [response, setResponse] = useState('Order created.');
...
var responseText = `<p>${resp.data.text} - <a href="home/bake" target="_blank">Bake ID [${resp.data.bake_id}]</a></p>`;
console.log(responseText);
// <p>Order placed successfuly. - <a href="home/bake" target="_blank">Bake ID [123]</a></p>
setResponse({ __html: responseText });
...

<span dangerouslySetInnerHTML={response}></span>
Solution

  • The initial state must also be an object with the __html key.

    const [response, setResponse] = useState({__html: 'Order created.'});