diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleList.md b/packages/react-core/src/components/SimpleList/examples/SimpleList.md
index 8f38100ca8e..d1e5eb43817 100644
--- a/packages/react-core/src/components/SimpleList/examples/SimpleList.md
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleList.md
@@ -9,120 +9,16 @@ propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 
 ### Simple list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem } from '@patternfly/react-core';
-
-class SimpleListDemo extends React.Component {
-  onSelect(selectedItem, selectedItemProps) {
-    console.log('new selection SimpleListDemo', selectedItem, selectedItemProps);
-  }
-
-  render() {
-    const items = [
-      <SimpleListItem key="item1" isActive>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" component="a" href="#">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3">List item 3</SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} aria-label="Simple List Example">
-        {items}
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListBasic.tsx"
 ```
 
 ### Grouped list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
-
-class SimpleListGroupDemo extends React.Component {
-  onSelect(selectedItem, selectedItemProps) {
-    console.log('new selection SimpleListGroupDemo', selectedItem, selectedItemProps);
-  }
-
-  render() {
-    const group1Items = [
-      <SimpleListItem key="item1" isActive>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" id="test 2">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3">List item 3</SimpleListItem>,
-      <SimpleListItem key="item4">List item 4</SimpleListItem>
-    ];
-
-    const group2Items = [
-      <SimpleListItem key="item5">List item 1</SimpleListItem>,
-      <SimpleListItem key="item6" component="a" href="#">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item7" component="a" href="#">
-        List item 3
-      </SimpleListItem>,
-      <SimpleListItem key="item8">List item 4</SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} aria-label="Grouped List Example">
-        <SimpleListGroup title="Group 1" id="group-1">
-          {group1Items}
-        </SimpleListGroup>
-        <SimpleListGroup title="Group 2" id="group-2">
-          {group2Items}
-        </SimpleListGroup>
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListGrouped.tsx"
 ```
 
 ### Uncontrolled simple list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem } from '@patternfly/react-core';
-
-class SimpleListUncontrolledDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 0
-    };
-    this.onSelect = (selectedItem, selectedItemProps) => {
-      console.log('new selection SimpleListUncontrolledDemo', selectedItem, selectedItemProps);
-      this.setState({ activeItem: selectedItemProps.itemId });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    const items = [
-      <SimpleListItem key="item1" itemId={0} isActive={activeItem === 0}>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" itemId={1} isActive={activeItem === 1}>
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3" itemId={2} isActive={activeItem === 2}>
-        List item 3
-      </SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} isControlled={false} aria-label="Uncontrolled Simple List Example">
-        {items}
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListUncontrolled.tsx"
 ```
+
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx
new file mode 100644
index 00000000000..130782a6d5d
--- /dev/null
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListBasic.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { SimpleList, SimpleListItem } from '@patternfly/react-core';
+
+export const SimpleListBasic: React.FunctionComponent = () => {
+  const items = [
+    <SimpleListItem key="item1" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3">List item 3</SimpleListItem>
+  ];
+
+  return <SimpleList aria-label="Simple List Example">{items}</SimpleList>;
+};
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx
new file mode 100644
index 00000000000..25e5f35d594
--- /dev/null
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListGrouped.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
+
+export const SimpleListGrouped: React.FunctionComponent = () => {
+  const group1Items = [
+    <SimpleListItem key="item1" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2">List item 2</SimpleListItem>,
+    <SimpleListItem key="item3">List item 3</SimpleListItem>,
+    <SimpleListItem key="item4">List item 4</SimpleListItem>
+  ];
+
+  const group2Items = [
+    <SimpleListItem key="item5">List item 1</SimpleListItem>,
+    <SimpleListItem key="item6" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item7" component="a" href="#">
+      List item 3
+    </SimpleListItem>,
+    <SimpleListItem key="item8">List item 4</SimpleListItem>
+  ];
+
+  return (
+    <SimpleList aria-label="Grouped simple list example">
+      <SimpleListGroup title="Group 1" id="group-1">
+        {group1Items}
+      </SimpleListGroup>
+      <SimpleListGroup title="Group 2" id="group-2">
+        {group2Items}
+      </SimpleListGroup>
+    </SimpleList>
+  );
+};
diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
new file mode 100644
index 00000000000..63ed0cc6dac
--- /dev/null
+++ b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { SimpleList, SimpleListItem, SimpleListItemProps } from '@patternfly/react-core';
+
+export const SimpleListUncontrolled: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (
+    selectedItem: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    selectedItemProps: SimpleListItemProps
+  ) => {
+    setActiveItem(selectedItemProps.itemId as number);
+  };
+
+  const items = [
+    <SimpleListItem key="item1" itemId={0} isActive={activeItem === 0}>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" itemId={1} isActive={activeItem === 1}>
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3" itemId={2} isActive={activeItem === 2}>
+      List item 3
+    </SimpleListItem>
+  ];
+
+  return (
+    <SimpleList onSelect={onSelect} isControlled={false} aria-label="Uncontrolled Simple List Example">
+      {items}
+    </SimpleList>
+  );
+};