fix: null child crashes RadioButtonGroup (#16655)

[brandones]

Closes #16655

Passing null as a child of a RadioButtonGroup would cause a crash.

Changelog

Changed

This code will no longer crash:

      <RadioButtonGroup name="foo">
        <RadioButton labelText="hey" />
        {null}
      </RadioButtonGroup>

Testing / Reviewing

Try the above code. I included a test.

[github-actions]

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

[brandones]

I have read the DCO document and I hereby sign the DCO.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	c508c94
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/667acbaf6ff95d0008e2d6f7
😎 Deploy Preview	https://deploy-preview-16691--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	c508c94
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/667acbaec653f4000843ee26
😎 Deploy Preview	https://deploy-preview-16691--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[2nikhiltom]

Hey @brandones .
Thanks for raising this bug and it's fix.

Just trying to understand the use case of below code

<div>
     hi
     <RadioButtonGroup name="foo">
       <RadioButton labelText="hey" />
       {null}
     </RadioButtonGroup>
   </div>

[brandones]

@2nikhiltom This kind of thing comes up often when options are not hard-coded.

const { blackIsAllowed } = useConfig();

<div>
     <RadioButtonGroup name="colors">
       <RadioButton labelText="red" value="red" />
       <RadioButton labelText="blue" value="blue" />
       { blackIsAllowed ? <RadioButton labelText="black" value="black" /> : null }
     </RadioButtonGroup>
</div>

Whether you use null, undefined, or false in the blackIsAllowed line, you will get a TypeError.

Also your library simply should not crash with a TypeError on what React considers well-structured input :)

[2nikhiltom]

Hey @brandones ! This looks great, could you resolve conflicts in the branch?

[brandones]

Got swooped by @cuppajoey , e582548 . So here's a test if you want it :)