Create a bolded section within a TextField component using Material UI version 5

Question

Create a bolded section within a TextField component using Material UI version 5

I am working with a TextField component that has a specific defaultValue set. Here is the code snippet:

  <TextField
      autoFocus={props.autoFocus}
      fullWidth
      defaultValue={props.defaultValue}
      value={text}
      onKeyPress={handleKeyPress}
      onFocus={(e) => e.target.select()}
      onChange={handleChange}
  />

Some parts of the default value are enclosed in parentheses, and I want to make these parts bold while keeping the rest as it is. Does anyone know how I can achieve this?

javascript css reactjs material-ui

Answer 1

Answer №1

If you need to include HTML in the label attribute dynamically, you can use the following function. While the MUI TextField defaultValue and value attributes do not support inline HTML, the label attribute does:

const htmlParser = (text) => {
  let i = 0;
  let l = 0;
  let renderables = [];
  let html = '';

  for (i = 0; i < text.length; i += 1) {
    if (text[i] === ' ') {
      renderables.push(text[i]);

      if (text[i + 1] === '(') {
        let isHtmlFound = false;
        while (!isHtmlFound) {
          for (l = i + 2; l < text.length; l += 1) {
            if (text[l] !== ')') {
              html = html.concat(text[l]);
            } else if (text[l] === ')') {
              isHtmlFound = true;
              break;
            }
          }
        }
        renderables.push(
          <strong>
            {html}
          </strong>,
        );
        html = '';
        i = l + 1;
      }
    }
    renderables.push(text[i]);
  }
  return renderables;
};

Now you can include HTML in your component label like this:

<TextField label={htmlParser('use (label) and (not) defaultValue')} ... />

Answer 2

If you need to include HTML in the label attribute dynamically, you can use the following function. While the MUI TextField defaultValue and value attributes do not support inline HTML, the label attribute does:

const htmlParser = (text) => {
  let i = 0;
  let l = 0;
  let renderables = [];
  let html = '';

  for (i = 0; i < text.length; i += 1) {
    if (text[i] === ' ') {
      renderables.push(text[i]);

      if (text[i + 1] === '(') {
        let isHtmlFound = false;
        while (!isHtmlFound) {
          for (l = i + 2; l < text.length; l += 1) {
            if (text[l] !== ')') {
              html = html.concat(text[l]);
            } else if (text[l] === ')') {
              isHtmlFound = true;
              break;
            }
          }
        }
        renderables.push(
          <strong>
            {html}
          </strong>,
        );
        html = '';
        i = l + 1;
      }
    }
    renderables.push(text[i]);
  }
  return renderables;
};

Now you can include HTML in your component label like this:

<TextField label={htmlParser('use (label) and (not) defaultValue')} ... />

Create a bolded section within a TextField component using Material UI version 5

Answer №1

Similar questions

What is the best way to remove a parent app.js element from a child component?

Efficiently rendering a million elements on an HTML canvas (and replicating the render from the server)

Retrieve the information transmitted to an EJS file within a separately included JavaScript file

View / Conceal Unordered List depending on link selected

The <img> tag is displaying with dimensions of 0 x 0 pixels even though its size was specified

Using React to dynamically display API data on your website

Update the style of the legend from bars to a line chart in chart.js version 2.4.0

Is there a way to include multiple div elements on a single page using React?

The Step-by-Step Guide to Adding a Function Style to Wordpress

Submit a HTML form to a Telegram recipient

Interacting between Angular controllers and directives while maintaining separation of concerns

Keep things in line with async functions in Node JS

Is it possible to format correctly using React-Intl without encountering this particular error message?

Guide on importing all exported functions from a directory dynamically in Node.js

What is the process for producing multiple objects in JSON format and then accessing them from within <g:javascript> in Grails?

Utilizing AJAX and JavaScript to generate a table using the AJAX response and placing it within a <div> element

Having trouble uploading an image to AWS using Angular and NodeJS?

I am receiving a 401 error when attempting to verify the token following a successful login

React js is not displaying the image

photos arranged in rows rather than a single row