diff --git a/packages/terra-icon/CHANGELOG.md b/packages/terra-icon/CHANGELOG.md index 142c2b4435d..8e10f33fe2f 100644 --- a/packages/terra-icon/CHANGELOG.md +++ b/packages/terra-icon/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Fixed + * Fixed console error `Each child in a list should have a unique "key" prop` thrown due to use of Array. + ## 3.51.0 - (January 31, 2023) * Added diff --git a/packages/terra-icon/src/IconBase.jsx b/packages/terra-icon/src/IconBase.jsx index ea6aec66d13..8c616db92be 100644 --- a/packages/terra-icon/src/IconBase.jsx +++ b/packages/terra-icon/src/IconBase.jsx @@ -80,10 +80,9 @@ const IconBase = ({ attributes.className, ); - let svgChildren; + let svgTitleTag; if (a11yLabel || ariaLabel) { - const svgA11yLabel = React.createElement('title', {}, a11yLabel || ariaLabel); - svgChildren = new Array(svgA11yLabel).concat(children); + svgTitleTag = React.createElement('title', {}, a11yLabel || ariaLabel); if (ariaLabel) { // eslint-disable-next-line no-console console.warn('`ariaLabel` prop has been renamed to `a11yLabel`. please update all the refernces of ariaLabel prop to a11yLabel.'); // to be removed on next major version release. @@ -102,7 +101,12 @@ const IconBase = ({ attributes.width = width; attributes.focusable = focusable; - return { svgChildren || children }; + return ( + + {svgTitleTag} + {children} + + ); }; IconBase.propTypes = propTypes;