diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
index cc6da5d110..08aeb0f53b 100644
--- a/src/components/List/ListAccordion.tsx
+++ b/src/components/List/ListAccordion.tsx
@@ -203,7 +203,7 @@ const ListAccordion = ({
const expandedInternal = expandedProp !== undefined ? expandedProp : expanded;
const groupContext = React.useContext(ListAccordionGroupContext);
- if (groupContext !== null && !id) {
+ if (groupContext !== null && (id === undefined || id === null || id === '')) {
throw new Error(
'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.'
);
diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx
index c9fe8d6d10..0c24538348 100644
--- a/src/components/__tests__/ListAccordion.test.tsx
+++ b/src/components/__tests__/ListAccordion.test.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
import { render } from '@testing-library/react-native';
import color from 'color';
@@ -7,6 +7,7 @@ import color from 'color';
import { getTheme } from '../../core/theming';
import { red500 } from '../../styles/themes/v2/colors';
import ListAccordion from '../List/ListAccordion';
+import ListAccordionGroup from '../List/ListAccordionGroup';
import ListIcon from '../List/ListIcon';
import ListItem from '../List/ListItem';
import { getAccordionColors } from '../List/utils';
@@ -84,6 +85,36 @@ it('renders list accordion with custom title and description styles', () => {
expect(tree).toMatchSnapshot();
});
+describe('ListAccordion', () => {
+ it('should not throw an error when id={0}', () => {
+ const ListAccordionTest = () => (
+
+
+
+
+
+ );
+
+ expect(() => render()).not.toThrow(
+ 'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.'
+ );
+ });
+
+ it('should throw an error when id={""}', () => {
+ const ListAccordionTest = () => (
+
+
+
+
+
+ );
+
+ expect(() => render()).toThrow(
+ 'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.'
+ );
+ });
+});
+
describe('getAccordionColors - title color', () => {
it('should return theme color, for theme version 3', () => {
expect(