HTML Entities in ReasonML/ReasonReact

#1

How do you render HTML entities to the DOM using ReasonML/ReasonReact?

#2

See Stack Overflow: How to add a copyright symbol in reason-react component?

#3

It looks like this works for only a certain set of characters at the moment. I was trying to create menu bars:

#4

Ah, I have to use dangerouslySetInnerHTML={{ "__html": "☰" }}. Didn’t want to have to do that but oh well.

#5

I don’t see why that wouldn’t work with just Unicode, but yeah if you have to emit actual HTML entities then you have to wrap it in another element.

This is an issue with React, not Reason or ReasonReact, btw, so other solutions might be, or become, possible if React enables them.

#6

In ReasonML/ReasonReact, you can render HTML entities to the DOM by using the ReasonReact.string function. This function allows you to create React elements that represent text content, including HTML entities.

Here’s how you can use ReasonReact.string to render HTML entities:

/* Import React and ReasonReact modules */
open ReasonReact;

/* Define your React component */
let component = ReasonReact.statelessComponent(“MyComponent”);

/* Define the render function /
let make = (_children) => {
…component,
render: _self =>
/ Render HTML entity using ReasonReact.string /


{ReasonReact.string(“©”)} / Renders the copyright symbol /
{" "} / Add a space between entities if needed /
{ReasonReact.string(“©”)} / Another way to render the copyright symbol */

};

Still have a doubt, here are the excellent Programme learning platform u can explore:-

  1. W3Schools
  2. Iqra Technology