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

[bohawi]

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[bot]]

Thanks for opening your first issue! :wave: 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.