Search code examples
stringreasonreason-react

ReasonReact unsafe string to element

I made a function that takes an string and replace a specific substring within it:

let mark = (str: string, sub: string) : string => {
    let re = Js.Re.fromString("(" ++ sub ++ ")");
    Js.String.replaceByRe(re, "<mark>$1</mark>", str);
};

It works as expected. The problem is that, when using ReasonReact.stringToElement it escapes the string, probably for security reasons. However, I do need a way to transform my string in elements unsafely, so the <mark> tag inside it becomes a valid HTML. How can I do this?

Solution

  • Use dangerouslytSetInnerHTML

    It translates almost exactly syntactically to ReasonReact:

    <div dangerouslySetInnerHTML={ "__html": "<mark>whatever</mark>" } />