diff --git a/src/components/BlockSwitcher/BlockSwitcher.tsx b/src/components/BlockSwitcher/BlockSwitcher.tsx index 3509caa567b..6353d1a7021 100644 --- a/src/components/BlockSwitcher/BlockSwitcher.tsx +++ b/src/components/BlockSwitcher/BlockSwitcher.tsx @@ -1,4 +1,4 @@ -import { Children } from 'react'; +import { Children, useId } from 'react'; import { View, Tabs } from '@aws-amplify/ui-react'; import { BlockProps } from './Block'; @@ -10,17 +10,30 @@ export const BlockSwitcherErrorMessage = 'BlockSwitcher requires more than one block element'; export const BlockSwitcher = ({ children }: BlockSwitcherProps) => { + const uniqueId = useId(); + if (!children.length || children.length <= 1) { throw new Error(BlockSwitcherErrorMessage); } + + /** + * convert names with spaces to valid ID attribute values + */ + const convertNameToValue = (name: string) => { + return `${name.split(' ').join('-').toLowerCase()}-${uniqueId}`; + }; + return ( - + {Children.map(children, (child, index) => { return ( child.props.name && ( - + {child.props.name} ) @@ -30,7 +43,10 @@ export const BlockSwitcher = ({ children }: BlockSwitcherProps) => { {Children.map(children, (child, index) => { return ( child.props.name && ( - + {child} )