React - Render all variable as html

Question

In my use case right now, we retrieve all value from Wordpress REST API. In Wordpress, special character saved as a html entity (e.g. ’).

It is really tiring to use dangerouslySetInnerHTML everywhere and makes the code not readable.

Is there a way to let react render all variable as HTML codes all along? XSS Attack is not my concern since we don't expect any input in the front end.

Thank you.

Answer 1

You can have a function handle the creation of HTML elements

function _tag(string) {
  var el = document.createElement('div');
  el.innerHTML = string;
  return el;
}

You can use this function in the render() to solve the problem