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

Having trouble initiating React in the command prompt

Passing an array to a path in React Router Dom V6

angular failure to assign a variable to $scope

Implementing JavaScript logic to proceed to the following array within a 3D array once a specific condition is met

React - discrepancy in date-fns' differenceInDays function resulting in a NaN output

Guide to tallying the occurrences of a specific key within an object array and attaching the count to each key's current value

Why isn't the JavaScript if statement working properly when checking the length?

Tips on generating an HTML element using JavaScript and storing it in a MySQL database

Using JQUERY for navigating through pages in a REST API while utilizing deferred functionality

How can a component be dynamically rendered in React?

Having trouble getting my React app to launch using the npm start command

Is there a way to customize Angular's number filter?

Utilizing @Material-UI Tabs for a Stylish Navigation Bar

JavaScript embedded in an HTML document, which in turn is embedded within JavaScript

Retrieve a text file using FTP asynchronously and utilizing Promises in Node.js and AWS Lambda

Encountering a Typescript error while attempting to extract state from a History object containing an enum property

What is the best way to generate a JavaScript variable using information from SQLite?

Ways to retrieve the value from a button when it is clicked

Is there a way to modify the state following a sorting operation?

Exploring the life cycle of React.js components, how state behaves within them, and the asynchronous nature