Update AccordionItem to use hooks

Author: ushamacdonald

src/components/AccordionItem.tsx

@@ -15,25 +15,14 @@ type Props = DivAttributes & {
     dangerouslySetExpanded?: boolean;
 };
 
-const defaultProps = {
-    className: 'accordion__item',
-};
-
-export default class AccordionItem extends React.Component<Props> {
-    static defaultProps: typeof defaultProps = defaultProps;
-
-    static displayName: DisplayName.AccordionItem = DisplayName.AccordionItem;
-
-    instanceUuid: UUID = nextUuid();
-
-    renderChildren = (itemContext: ItemContext): JSX.Element => {
-        const {
-            uuid,
-            className,
-            activeClassName,
-            dangerouslySetExpanded,
-            ...rest
-        } = this.props;
+const AccordionItem = ({
+    uuid = nextUuid(),
+    dangerouslySetExpanded,
+    className = 'accordion__item',
+    activeClassName,
+    ...rest
+}: Props): JSX.Element => {
+    const renderChildren = (itemContext: ItemContext): JSX.Element => {
         const { expanded } = itemContext;
         const cx = expanded && activeClassName ? activeClassName : className;
 
@@ -46,26 +35,20 @@ export default class AccordionItem extends React.Component<Props> {
         );
     };
 
-    render(): JSX.Element {
-        const {
-            uuid = this.instanceUuid,
-            dangerouslySetExpanded,
-            ...rest
-        } = this.props;
-
-        assertValidHtmlId(uuid);
+    assertValidHtmlId(uuid);
+    if (rest.id) {
+        assertValidHtmlId(rest.id);
+    }
+    return (
+        <ItemProvider
+            uuid={uuid}
+            dangerouslySetExpanded={dangerouslySetExpanded}
+        >
+            <ItemConsumer>{renderChildren}</ItemConsumer>
+        </ItemProvider>
+    );
+};
 
-        if (rest.id) {
-            assertValidHtmlId(rest.id);
-        }
+AccordionItem.displayName = DisplayName.AccordionItem;
 
-        return (
-            <ItemProvider
-                uuid={uuid}
-                dangerouslySetExpanded={dangerouslySetExpanded}
-            >
-                <ItemConsumer>{this.renderChildren}</ItemConsumer>
-            </ItemProvider>
-        );
-    }
-}
+export default AccordionItem;