diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
index 8298ef233ad..38b663c4a54 100644
--- a/packages/terra-core-docs/CHANGELOG.md
+++ b/packages/terra-core-docs/CHANGELOG.md
@@ -2,6 +2,8 @@
## Unreleased
+* Updated
+ * Updated terra list examples.
* Changed
* Updated documentation for `terra-form-select`.
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/list/example/DraggableListItem.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/list/example/DraggableListItem.jsx
index cd63be87a75..7a3402cf58f 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/list/example/DraggableListItem.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/list/example/DraggableListItem.jsx
@@ -28,6 +28,7 @@ const ListDraggableExample = () => {
const [dataList, setDataList] = useState(mockData);
const [selectedKey, setselectedKey] = useState('unique-0');
+ const [selectedData, setSelectedData] = useState('John Smith');
const listNode = useRef(null);
const reorderListItems = (list, startIndex, endIndex) => {
@@ -51,6 +52,7 @@ const ListDraggableExample = () => {
event.preventDefault();
if (selectedKey !== metaData.key) {
setselectedKey(metaData.key);
+ setSelectedData(metaData.data);
}
};
@@ -59,7 +61,7 @@ const ListDraggableExample = () => {
key={itemData.key}
isSelectable
isSelected={selectedKey === itemData.key}
- metaData={{ key: itemData.key }}
+ metaData={{ key: itemData.key, data: itemData.title }}
onSelect={handleItemSelection}
>
Select a patient from the list to view patient details. + Selected Item: + {' '} + {selectedData}