question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FormControlLabel is required with latest alpha release

See original GitHub issue

FormControlLabel without label brakes the component with 5.0.0-alpha.33. Prior to this release it was optional.

Cannot read property 'type' of undefined
  • [X ] The issue is present in the latest release.
  • [ X] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When label is not provided FormControlLabel throws error Cannot read property 'type' of undefined

Expected Behavior 🤔

It should render without error

Steps to Reproduce 🕹

Create FormControlLabel without label. https://codesandbox.io/s/mystifying-snow-ksc4t?file=/src/Demo.tsx:232-248

Steps:

Context 🔦

Your Environment 🌎

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Jun 29, 2021

I would vote for making the label required.

1reaction
mnajdovacommented, May 17, 2021

My first vote would be to make the label required, I don’t see what is the use-case of using a FormControlLabel without a label. If you can share one it would be great!

If we don’t want to make this breaking change, this diff should fix the issue and preserve the previous behavior:

diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
index 17389479ee..9c17f89974 100644
--- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js
+++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
@@ -129,7 +129,7 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(inProps, ref
       {...other}
     >
       {React.cloneElement(control, controlProps)}
-      {label.type === Typography || disableTypography ? (
+      {label && label.type === Typography || disableTypography ? (
         label
       ) : (
         <Typography component="span" className={classes.label} {...componentProps.typography}>
Read more comments on GitHub >

github_iconTop Results From Across the Web

FormControlLabel has a default margin-right, is this intended?
Thanks for the report. I agree none of the components should have a margin unless necessary. However, changing this would be a breaking...
Read more >
FormControlLabel API - Material UI - MUI
API reference docs for the React FormControlLabel component. Learn about the props, CSS, and other APIs of this exported module.
Read more >
@material-ui/core FormControlLabel TypeScript Examples
This page shows TypeScript code examples of @material-ui/core FormControlLabel.
Read more >
What is the new Bootstrap 4 control-label class?
You were referring to the alpha docs which are vastly outdated. I mean, the alpha version of Bootstrap 4 is vastly outdated.
Read more >
@mui/material - npm
React components that implement Google's Material Design.. Latest version: 5.11.2, last published: 2 days ago. Start using @mui/material in ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found