Issue with rendering HTML entities in Material UI when passing as props

Question

Issue with rendering HTML entities in Material UI when passing as props

Encountered a problem with the radio buttons in Material UI. Currently, Material UI accepts value as a prop for the FormControlLabel component. When passing a string with an HTML entity like below, it gets parsed correctly.

<FormControlLabel value="female" label="I&#39;m male" />
output: I'm male

However, when passing the same string as a prop, it does not get parsed correctly and the special character is displayed as sent.

const label="I&#39;m male";
<FormControlLabel value={value} label={label} />
output: I&#39;m male

I searched online for relevant threads but couldn't find any. If there is an existing issue, please provide a link or suggest an alternative solution if you have one. Below is the link to the codesandbox:

https://codesandbox.io/s/material-demo-543y4

javascript reactjs radio-button material-ui radio-group

Answer 1

Answer №1

&....; represents an HTML Entity, making it work directly in HTML but not in javascript.

To make it usable in javascript, you need to decode it.

You can achieve this by following the method outlined here: https://medium.com/@tertiumnon/js-how-to-decode-html-entities-8ea807a140e5

function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

Then, you would use it like this:

const label=decodeHTMLEntities("I&#39;m male");

An alternative and more concise approach in modern javascript is to use tagged templates:

const entityDecode = (() => {
    const el = document.createElement('textarea');
    return (strings) => {
        el.innerHTML = strings.join('');
        return el.value;
    }
})();
const label=entityDecode`I&#39;m male`;
console.log(label);

Answer 2

&....; represents an HTML Entity, making it work directly in HTML but not in javascript.

To make it usable in javascript, you need to decode it.

You can achieve this by following the method outlined here: https://medium.com/@tertiumnon/js-how-to-decode-html-entities-8ea807a140e5

function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

Then, you would use it like this:

const label=decodeHTMLEntities("I&#39;m male");

An alternative and more concise approach in modern javascript is to use tagged templates:

const entityDecode = (() => {
    const el = document.createElement('textarea');
    return (strings) => {
        el.innerHTML = strings.join('');
        return el.value;
    }
})();
const label=entityDecode`I&#39;m male`;
console.log(label);

Issue with rendering HTML entities in Material UI when passing as props

Answer №1

Similar questions

Removing the navigation button from the hamburger menu

Exploring the Utilization of FormData and form.serialize within the Data Parameter of Ajax Jquery

Tips for effectively incorporating additional directives into a directive as it is being defined

Input a new value into the registration field to update it

Unveiling the power of localStorage in Next.js to enhance initial rendering

The most effective method for transferring asynchronous data to pages in Next.js

What steps should I follow to ensure that the processData function waits for the data returned by the getData function in Angular?

Store the incoming documents from xmpp using the Strophe si-filetransfer feature

The attempt to cast to a number for the value of "[object Object]" at the specified path failed in mongoose

Unlock the secrets of obtaining data in React-Native by deciphering what happens when the switch is

Tips on ensuring the <script> section of a Vuejs single file component loads prior to the <template> section

Platform Independent Data Storage Solution

One common issue is being unable to target input[type=file] when multiple forms are present on a page using JavaScript

Conceal any elements designated by a particular class and reveal them based on their corresponding ID

Tips for incorporating an SVG image into a Next.js application while being able to dynamically change its color

Experiencing issues with Errors when Targeting ES5 in Angular2 TypeScript?

There seems to be a problem with the external JavaScript file not functioning

An unanticipated error event occurred while executing the create react app command

What is the best way to add the current date to a database?

Expressjs: Validating google-auth-library ID token "token has expired, please try again..."