Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button Group throws error if last child component is not an element #3061

Open
bohawi opened this issue Aug 8, 2022 · 1 comment
Open

Button Group throws error if last child component is not an element #3061

bohawi opened this issue Aug 8, 2022 · 1 comment

Comments

@bohawi
Copy link

bohawi commented Aug 8, 2022

Design System React is expecting the last child in a button group to be an element, however React allows non-element children such as Boolean, undefined or null.

https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored

This occurs when building a button group like so:

const hasButtonOne = true;
const hasButtonTwo = false;

return (
    <buttongroup>
        { hasButtonOne && <button /> }
        { hasButtonTwo && <button /> }
    </buttongroup>
)

The issue seems to be here, where cloneElement is called for the last item in the child array and assumes that it will be an element:

https://github.com/salesforce/design-system-react/blob/master/components/button-group/index.jsx#L86

@welcome
Copy link

welcome bot commented Aug 8, 2022

Thanks for opening your first issue! 👋
If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant