Boolean Value Not Rendered in MUI Typography Component

[LokeshBoran]

Steps to reproduce

Link to live example: (required)
CodeSend Box
Stackblitz

Steps to Reproduce:

1. Create a simple React component using MUI's Typography.
2. Assign a boolean value to a variable.
3. Attempt to render this boolean value directly inside the Typography component.

Here is a code sample that demonstrates the issue:

import * as React from 'react';
import Typography from '@mui/material/Typography';

export default function Types() {
  var customValue = true; // Boolean value
  return (
    <Typography variant="h1">
      {customValue} // Attempting to render a boolean value
    </Typography>
  );
}

Workaround:
A workaround is to convert the boolean value to a string before rendering it. This can be done using String(customValue) or customValue.toString() or JSON.stringify(customValue).

Example workaround:

import * as React from 'react';
import Typography from '@mui/material/Typography';

export default function Types() {
  var customValue = true;
  return (
    <Typography variant="h1">
      {String(customValue)} // Converts boolean to string
    </Typography>
  );
}

Environment:

1. MUI Version: 5.x.x (Please specify the exact version you're using)
2. React Version: 17.x.x or 18.x.x (Please specify the exact version you're using)
3. Browser: (Please specify the browser and version)
4. Operating System: (Please specify the OS and version)

Additional Information:
This issue occurs because Typography (or its underlying rendering mechanism) does not implicitly convert boolean values to strings. Boolean values are not typically meant to be directly rendered in most UI components.

It would be helpful to provide an enhancement or a warning to developers to convert boolean values to strings before rendering.

Suggested Fix:
Enhance the Typography component to handle boolean values gracefully by converting them to their string representation before rendering. This can be implemented by checking the type of the children prop and converting boolean values as needed.

Screenshot

Current behavior

The Typography component does not render anything when a boolean value is provided directly.

Expected behavior

The Typography component should display the string representation of the boolean value, i.e., it should render true or false.

Context

When using the MUI (Material-UI) Typography component to render a boolean value directly within the component, the boolean value is not displayed on the UI. Instead of rendering true or false, nothing is shown. This issue can lead to confusion, especially when trying to debug UI elements that should display boolean states.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: MUI Typography, Boolean value MUI Typography

[sai6855]

@LokeshBoran react it's self cannot render boolean values. this is not a limitation with Typography component, In below screenshot you can see, true, false are not rendered when wrapped with in p