diff --git a/packages/react-integration/demo-app-ts/src/App.tsx b/packages/react-integration/demo-app-ts/src/App.tsx
index 5cc08fb0dae..05a1b957e70 100755
--- a/packages/react-integration/demo-app-ts/src/App.tsx
+++ b/packages/react-integration/demo-app-ts/src/App.tsx
@@ -10,7 +10,7 @@ interface AppState {
 
 class App extends React.Component<{}, AppState> {
   state: AppState = {
-    activeItem: null
+    activeItem: ''
   };
 
   private onNavSelect = (selectedItem: { itemId: number | string }) => {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx
index 09b918a0b64..f0ef2d2aeda 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx
@@ -6,9 +6,9 @@ interface AboutModalState {
   isModalOpen: boolean;
 }
 
-export class AboutModalDemo extends React.Component<null, AboutModalState> {
+export class AboutModalDemo extends React.Component<{}, AboutModalState> {
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       isModalOpen: false
     };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx
index 4bf096f7edc..fe22f692e11 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/AccordionDemo/AccordionDemo.tsx
@@ -7,7 +7,7 @@ interface AccordionDemoState {
 
 export class AccordionDemo extends React.Component<null, AccordionDemoState> {
   state: AccordionDemoState = {
-    expanded: null
+    expanded: ''
   };
 
   componentDidMount() {
@@ -16,7 +16,7 @@ export class AccordionDemo extends React.Component<null, AccordionDemoState> {
 
   onToggle = (id: string) => {
     const { expanded } = this.state;
-    this.setState({ expanded: id !== expanded ? id : null });
+    this.setState({ expanded: id !== expanded ? id : '' });
   };
 
   render() {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx
index 6663f8c77a5..45eaf6a83b3 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertDemo/AlertDemo.tsx
@@ -6,9 +6,9 @@ interface AlertDemoState {
   alertTwoVisible: boolean;
 }
 
-export class AlertDemo extends React.Component<null, AlertDemoState> {
+export class AlertDemo extends React.Component<{}, AlertDemoState> {
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = { alertOneVisible: true, alertTwoVisible: true };
   }
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx
index 1145906638c..b50cd9bf3e0 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/AlertGroupDemo/AlertGroupDemo.tsx
@@ -12,19 +12,20 @@ interface AlertGroupDemoState {
   timer: number;
 }
 
-export class AlertGroupDemo extends React.Component<null, AlertGroupDemoState> {
+export class AlertGroupDemo extends React.Component<{}, AlertGroupDemoState> {
   stopAsyncAlerts: () => void;
   removeAlert: (key: React.ReactText) => void;
 
-  constructor(props: {}) {
-    super(props as null);
+  constructor(props: {}, removeAlert: (key: React.ReactText) => void) {
+    super(props);
     this.state = {
       alerts: [],
-      timer: null
+      timer: 0
     };
     this.stopAsyncAlerts = () => {
       clearInterval(this.state.timer);
     };
+    this.removeAlert = removeAlert;
   }
   componentWillUnmount() {
     this.stopAsyncAlerts();
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx
index 7ccd98e8bf6..e3dc2c38db5 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherDemo.tsx
@@ -5,11 +5,11 @@ interface ApplicationLauncherState {
   isOpen: boolean;
 }
 
-export class ApplicationLauncherDemo extends React.Component<null, ApplicationLauncherState> {
+export class ApplicationLauncherDemo extends React.Component<{}, ApplicationLauncherState> {
   onToggle: (isOpen: boolean) => void;
   onSelect: (event: any) => void;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       isOpen: false
     };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherFavoritesDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherFavoritesDemo.tsx
index 80d24a92f69..e971d642538 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherFavoritesDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ApplicationLauncherDemo/ApplicationLauncherFavoritesDemo.tsx
@@ -9,17 +9,17 @@ import {
 interface ApplicationLauncherFavoritesDemoState {
   isOpen: boolean;
   favorites: string[];
-  filteredItems: JSX.Element[];
+  filteredItems: (JSX.Element | null)[] | null;
 }
 
 export class ApplicationLauncherFavoritesDemo extends React.Component<null, ApplicationLauncherFavoritesDemoState> {
   state: ApplicationLauncherFavoritesDemoState = {
     isOpen: false,
-    favorites: [],
+    favorites: [''],
     filteredItems: null
   };
 
-  appLauncherItems = [
+  appLauncherItems: JSX.Element[] = [
     <ApplicationLauncherGroup key="group 1c">
       <ApplicationLauncherItem key="group 1a" id="item-1">
         Item without group title
@@ -88,16 +88,20 @@ export class ApplicationLauncherFavoritesDemo extends React.Component<null, Appl
             filteredGroup.props.children[0].type !== ApplicationLauncherSeparator
           ) {
             return filteredGroup;
+          } else {
+            return null;
           }
         })
         .filter(newGroup => newGroup);
 
       if (filteredGroups.length > 0) {
         let lastGroup = filteredGroups.pop();
-        lastGroup = React.cloneElement(lastGroup, {
-          children: lastGroup.props.children.filter((item: JSX.Element) => item.type !== ApplicationLauncherSeparator)
-        });
-        filteredGroups.push(lastGroup);
+        if (lastGroup) {
+          lastGroup = React.cloneElement(lastGroup, {
+            children: lastGroup.props.children.filter((item: JSX.Element) => item.type !== ApplicationLauncherSeparator)
+          });
+          filteredGroups.push(lastGroup);
+        }
       }
 
       this.setState({
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CheckboxDemo/CheckboxDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CheckboxDemo/CheckboxDemo.tsx
index 156c2c811e7..253d41bff9c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/CheckboxDemo/CheckboxDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/CheckboxDemo/CheckboxDemo.tsx
@@ -9,7 +9,7 @@ interface CheckboxState {
 export class CheckboxDemo extends React.Component<{}, CheckboxState> {
   handleChange: (check: boolean, event: React.FormEvent<HTMLInputElement>) => void;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       check1: false,
       check2: false
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx
index 6f9516114db..7f2d0fdd213 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx
@@ -12,7 +12,7 @@ interface BadgeChipState {
 export class ChipGroupDemo extends Component<{}, BadgeChipState> {
   deleteItem: (id: string) => void;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       badgeChipArray: [
         {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupToolbarDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupToolbarDemo.tsx
index a8a7128461e..9d3b870e1a5 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupToolbarDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupToolbarDemo.tsx
@@ -13,7 +13,7 @@ export class ToolbarChipGroupDemo extends Component<{}, ToolbarChipGroupState> {
   deleteCategory: (category: string) => void;
 
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       chipGroups: [
         {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ContextSelectorDemo/ContextSelectorDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ContextSelectorDemo/ContextSelectorDemo.tsx
index 78018d2901d..ba0cf89a5c9 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/ContextSelectorDemo/ContextSelectorDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/ContextSelectorDemo/ContextSelectorDemo.tsx
@@ -3,66 +3,58 @@ import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core';
 
 interface ContextSelectorState {
   isOpen: boolean;
-  selected: string;
+  selected: React.ReactNode;
   searchValue: string;
   filteredItems: string[];
 }
 
 export class ContextSelectorDemo extends React.Component<{}, ContextSelectorState> {
-  items: string[];
-  onToggle: (event, isOpen: boolean) => void;
-  onSelect: (event, value: string) => void;
-  onSearchInputChange: (value: string) => void;
-  onSearchButtonClick: (event: React.SyntheticEvent<HTMLButtonElement, Event>) => void;
-  constructor(props: {}) {
-    super(props as null);
-    this.items = [
-      'My Project',
-      'OpenShift Cluster',
-      'Production Ansible',
-      'AWS',
-      'Azure',
-      'My Project 2',
-      'OpenShift Cluster ',
-      'Production Ansible 2 ',
-      'AWS 2',
-      'Azure 2'
-    ];
+  items = [
+    'My Project',
+    'OpenShift Cluster',
+    'Production Ansible',
+    'AWS',
+    'Azure',
+    'My Project 2',
+    'OpenShift Cluster ',
+    'Production Ansible 2 ',
+    'AWS 2',
+    'Azure 2'
+  ];
 
-    this.state = {
-      isOpen: false,
-      selected: this.items[0],
-      searchValue: '',
-      filteredItems: this.items
-    };
+  state = {
+    isOpen: false,
+    selected: this.items[0],
+    searchValue: '',
+    filteredItems: this.items
+  };
 
-    this.onToggle = (event, isOpen) => {
-      this.setState({
-        isOpen
-      });
-    };
+  onToggle = (event: React.SyntheticEvent, isOpen: boolean) => {
+    this.setState({
+      isOpen
+    });
+  };
 
-    this.onSelect = (event, value) => {
-      this.setState({
-        selected: value,
-        isOpen: !this.state.isOpen
-      });
-    };
+  onSelect = (event: React.SyntheticEvent, value: React.ReactNode) => {
+    this.setState({
+      selected: value,
+      isOpen: !this.state.isOpen
+    });
+  };
 
-    this.onSearchInputChange = value => {
-      this.setState({ searchValue: value });
-    };
+  onSearchInputChange = (value: string) => {
+    this.setState({ searchValue: value });
+  };
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    this.onSearchButtonClick = _event => {
-      const filtered =
-        this.state.searchValue === ''
-          ? this.items
-          : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onSearchButtonClick = (event?: React.SyntheticEvent<HTMLButtonElement, Event>) => {
+    const filtered =
+      this.state.searchValue === ''
+        ? this.items
+        : this.items.filter(str => str.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1);
 
-      this.setState({ filteredItems: filtered || [] });
-    };
-  }
+    this.setState({ filteredItems: filtered || [] });
+  };
 
   componentDidMount() {
     window.scrollTo(0, 0);
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
index 67f3d6eb0c6..b6887e18689 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
@@ -13,8 +13,8 @@ interface DataListState {
 }
 
 export class DataListDemo extends React.Component<DataListProps, DataListState> {
-  constructor(props: {}) {
-    super(props as null);
+  constructor(props: DataListProps) {
+    super(props);
     this.state = {
       selectedDataListItemId: ''
     };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DataToolbarDemo/DataToolbarDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DataToolbarDemo/DataToolbarDemo.tsx
index d12ac74b903..5e822fd5dfb 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DataToolbarDemo/DataToolbarDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DataToolbarDemo/DataToolbarDemo.tsx
@@ -4,6 +4,8 @@ import {
   ButtonVariant,
   DataToolbar,
   DataToolbarItem,
+  DataToolbarChip,
+  DataToolbarChipGroup,
   DataToolbarContent,
   DataToolbarFilter,
   DataToolbarToggleGroup,
@@ -29,7 +31,7 @@ import SyncIcon from '@patternfly/react-icons/dist/js/icons/sync-icon';
 interface Filter {
   risk: string[];
   status: string[];
-  key?: string[];
+  key: string[];
 }
 
 interface DataToolbarState {
@@ -51,7 +53,8 @@ export class DataToolbarDemo extends React.Component<DataToolbarProps, DataToolb
       riskisOpen: false,
       filters: {
         risk: ['Low'],
-        status: ['New', 'Pending']
+        status: ['New', 'Pending'],
+        key: ['']
       },
       kebabIsOpen: false
     };
@@ -73,8 +76,13 @@ export class DataToolbarDemo extends React.Component<DataToolbarProps, DataToolb
     this.setState({ inputValue: newValue });
   };
 
-  onSelect = (type: string, event, selection: string | SelectOptionObject) => {
-    const checked = event.target.checked;
+  onSelect = (
+    type: keyof Filter,
+    event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject
+  ) => {
+    const selectedTarget = event.target as HTMLInputElement;
+    const checked = selectedTarget.checked;
     this.setState(prevState => {
       const prevSelections = prevState.filters[type];
       return {
@@ -96,11 +104,12 @@ export class DataToolbarDemo extends React.Component<DataToolbarProps, DataToolb
     this.onSelect('risk', event, selection);
   };
 
-  onDelete = (type = '', id = '') => {
+  onDelete = (type: string | DataToolbarChipGroup = '', id: DataToolbarChip | string = '') => {
     if (type) {
+      const lowerCaseType = typeof type === 'string' ? type.toLowerCase() : type.name.toLowerCase();
       this.setState(prevState => {
         const newState = Object.assign(prevState);
-        newState.filters[type.toLowerCase()] = newState.filters[type.toLowerCase()].filter((s: string) => s !== id);
+        newState.filters[lowerCaseType] = newState.filters[lowerCaseType].filter((s: string) => s !== id);
         return {
           filters: newState.filters
         };
@@ -109,7 +118,8 @@ export class DataToolbarDemo extends React.Component<DataToolbarProps, DataToolb
       this.setState({
         filters: {
           risk: [],
-          status: []
+          status: [],
+          key: []
         }
       });
     }
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationGreenStaticRightDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationGreenStaticRightDemo.tsx
index 9c045b09f53..9ab90ef496e 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationGreenStaticRightDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationGreenStaticRightDemo.tsx
@@ -7,9 +7,9 @@ import {
 } from '@patternfly/react-charts';
 
 export class DonutUtilizationGreenStaticRightDemo extends React.Component<{}, { used: number }> {
-  interval: number;
+  interval: number = 0;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       used: 0
     };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationInvertedRightDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationInvertedRightDemo.tsx
index d569f228f2a..fa72de81f07 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationInvertedRightDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationInvertedRightDemo.tsx
@@ -4,7 +4,7 @@ import { ChartDonutUtilization } from '@patternfly/react-charts';
 export class DonutUtilizationInvertedRightDemo extends React.Component<{}, { used: number; spacer: string }> {
   interval: any;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       spacer: '',
       used: 100
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSimpleRightDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSimpleRightDemo.tsx
index 7901b43c22d..05ceff5621c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSimpleRightDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSimpleRightDemo.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { ChartDonutUtilization } from '@patternfly/react-charts';
 
 export class DonutUtilizationSimpleRightDemo extends React.Component<{}, { used: number; spacer: string }> {
-  interval: number;
+  interval: number = 0;
 
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       spacer: '',
       used: 0
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSimpleRightGreenDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSimpleRightGreenDemo.tsx
index e6ac48a637c..408564fb7fd 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSimpleRightGreenDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSimpleRightGreenDemo.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { ChartDonutUtilization, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
 
 export class DonutUtilizationSimpleRightGreenDemo extends React.Component<{}, { used: number; spacer: string }> {
-  interval: number;
+  interval: number = 0;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       spacer: '',
       used: 0
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSmallRightDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSmallRightDemo.tsx
index 66c2dc8ab26..28ccc2a3499 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSmallRightDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSmallRightDemo.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { ChartDonutUtilization } from '@patternfly/react-charts';
 
 export class DonutUtilizationSmallRightDemo extends React.Component<{}, { used: number; spacer: string }> {
-  interval: number;
+  interval: number = 0;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       spacer: '',
       used: 0
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSmallStaticRightDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSmallStaticRightDemo.tsx
index d58c6f9ff78..24d23a62cf7 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSmallStaticRightDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationSmallStaticRightDemo.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
 
 export class DonutUtilizationSmallStaticRightDemo extends React.Component<{}, { used: number }> {
-  interval: number;
+  interval: number = 0;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       used: 0
     };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationStaticInvertedRightDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationStaticInvertedRightDemo.tsx
index 9bedb012566..12da79cae95 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationStaticInvertedRightDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationStaticInvertedRightDemo.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
 
 export class DonutUtilizationStaticInvertedRightDemo extends React.Component<{}, { used: number; spacer: string }> {
-  interval: number;
+  interval: number = 0;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       spacer: '',
       used: 100
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationStaticRightDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationStaticRightDemo.tsx
index 72c8d87dce8..e035fcc1f1c 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationStaticRightDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DonutUtilizationChartDemo/DonutUtilizationStaticRightDemo.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts';
 
 export class DonutUtilizationStaticRightDemo extends React.Component<{}, { used: number }> {
-  interval: number;
+  interval: number = 0;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       used: 0
     };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx
index 9c2f2141028..5c17c0f1097 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx
@@ -23,14 +23,14 @@ interface DropdownState {
 
 export class DropdownDemo extends React.Component<{}, DropdownState> {
   onToggle: (isOpen: boolean) => void;
-  onSelect: (event: React.SyntheticEvent<HTMLDivElement>) => void;
+  onSelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
   onFocus: () => void;
   onActionToggle: (isOpen: boolean) => void;
-  onActionSelect: (event: React.SyntheticEvent<HTMLDivElement>) => void;
+  onActionSelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
   onActionClick: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   onActionFocus: () => void;
   onCogToggle: (isOpen: boolean) => void;
-  onCogSelect: (event: React.SyntheticEvent<HTMLDivElement>) => void;
+  onCogSelect: (event?: React.SyntheticEvent<HTMLDivElement>) => void;
   onCogClick: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   onCogFocus: () => void;
 
@@ -55,7 +55,9 @@ export class DropdownDemo extends React.Component<{}, DropdownState> {
     };
     this.onFocus = () => {
       const element = document.getElementById('toggle-id');
-      element.focus();
+      if (element) {
+        element.focus();
+      }
     };
 
     this.onActionToggle = isActionOpen => {
@@ -77,7 +79,9 @@ export class DropdownDemo extends React.Component<{}, DropdownState> {
     };
     this.onActionFocus = () => {
       const element = document.getElementById('action-toggle-id');
-      element.focus();
+      if (element) {
+        element.focus();
+      }
     };
 
     this.onCogToggle = isCogOpen => {
@@ -104,7 +108,9 @@ export class DropdownDemo extends React.Component<{}, DropdownState> {
     };
     this.onCogFocus = () => {
       const element = document.getElementById('cog-toggle-id');
-      element.focus();
+      if (element) {
+        element.focus();
+      }
     };
   }
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx
index 922452205a6..3cbc0076573 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx
@@ -6,6 +6,7 @@ import {
   TextInput,
   Select,
   SelectOption,
+  SelectOptionObject,
   SelectVariant,
   ValidatedOptions
 } from '@patternfly/react-core';
@@ -21,7 +22,7 @@ export interface FormState {
 
 export class FormDemo extends Component<FormProps, FormState> {
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       value: 'Five',
       isValid: false,
@@ -43,9 +44,9 @@ export class FormDemo extends Component<FormProps, FormState> {
       isOpen
     });
   };
-  onSelect = (event: React.SyntheticEvent, selection: string) => {
+  onSelect = (event: React.SyntheticEvent, selection: string | SelectOptionObject) => {
     const { selected } = this.state;
-    if (selected.includes(selection)) {
+    if (selected.includes(selection.toString())) {
       this.setState(
         prevState => ({ selected: prevState.selected.filter(item => item !== selection) }),
         // eslint-disable-next-line no-console
@@ -53,7 +54,7 @@ export class FormDemo extends Component<FormProps, FormState> {
       );
     } else {
       this.setState(
-        prevState => ({ selected: [...prevState.selected, selection] }),
+        prevState => ({ selected: [...prevState.selected, selection.toString()] }),
         // eslint-disable-next-line no-console
         () => console.log('selections: ', this.state.selected)
       );
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/FormSelectDemo/FormSelectDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/FormSelectDemo/FormSelectDemo.tsx
index 4560ac4dae7..44704173aa2 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/FormSelectDemo/FormSelectDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/FormSelectDemo/FormSelectDemo.tsx
@@ -23,7 +23,7 @@ export class FormSelectDemo extends Component<{}, FormSelectState> {
   groups: FormSelectGroup[];
   validatedSelectOptions: FormSelectOption[];
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       value: '2',
       validatedValue: '',
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
index 37f601ff943..90f8fc1b0d9 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/InputGroupDemo/InputGroupDemo.tsx
@@ -28,7 +28,7 @@ export class InputGroupDemo extends React.Component<{}, InputGroupState> {
   onToggle: (isOpen: boolean) => void;
   onSelect: (event: any) => void;
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       isOpen: false,
       selected: ''
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NotificationBadgeDemo/NotificationBadgeDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NotificationBadgeDemo/NotificationBadgeDemo.tsx
index 69f6c390a08..d2be5afe849 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/NotificationBadgeDemo/NotificationBadgeDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/NotificationBadgeDemo/NotificationBadgeDemo.tsx
@@ -8,7 +8,7 @@ interface NotificationBadgeDemoState {
 
 export class NotificationBadgeDemo extends React.Component<NotificationBadgeProps, NotificationBadgeDemoState> {
   constructor(props: {}) {
-    super(props as null);
+    super(props);
     this.state = {
       isRead: false
     };
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/OptionsMenuDemo/OptionsMenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/OptionsMenuDemo/OptionsMenuDemo.tsx
index 5dba191c102..ba796e45a00 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/OptionsMenuDemo/OptionsMenuDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/OptionsMenuDemo/OptionsMenuDemo.tsx
@@ -41,9 +41,11 @@ export class OptionsMenuDemo extends React.Component<React.HTMLProps<HTMLDivElem
     this.setState({ disabledOptionsIsOpen: !this.state.disabledOptionsIsOpen });
   };
 
-  onSelect = (event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent) => {
-    const id = event.currentTarget.id;
-    this.setState(() => ({ selectedOption: id }));
+  onSelect = (event?: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent) => {
+    if (event) {
+      const id = event.currentTarget.id;
+      this.setState(() => ({ selectedOption: id }));
+    }
   };
 
   componentDidMount() {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
index 308a8ebf43e..ba046b9fb97 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
@@ -32,7 +32,7 @@ export class OverflowMenuDemo extends React.Component {
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onSimpleSelect = (_event: React.SyntheticEvent<HTMLDivElement>) => {
+  onSimpleSelect = (_event?: React.SyntheticEvent<HTMLDivElement>) => {
     this.setState({
       isSimpleOpen: !this.state.isSimpleOpen
     });
@@ -89,7 +89,7 @@ export class OverflowMenuDemo extends React.Component {
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onAdditionalOptionsSelect = (_event: React.SyntheticEvent<HTMLDivElement>) => {
+  onAdditionalOptionsSelect = (_event?: React.SyntheticEvent<HTMLDivElement>) => {
     this.setState({
       isAdditionalOptionsOpen: !this.state.isAdditionalOptionsOpen
     });
@@ -170,7 +170,7 @@ export class OverflowMenuDemo extends React.Component {
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onPersistSelect = (_event: React.SyntheticEvent<HTMLDivElement>) => {
+  onPersistSelect = (_event?: React.SyntheticEvent<HTMLDivElement>) => {
     this.setState({
       isPersistOpen: !this.state.isPersistOpen
     });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
index fd63c0faa00..b01e2ddcb7e 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
@@ -17,8 +17,8 @@ export class PageDemo extends React.Component {
 
   render() {
     const { isNavOpen } = this.state;
-    const headerRole: string = undefined;
-    const pageRole: string = undefined;
+    const headerRole: string | undefined = undefined;
+    const pageRole: string | undefined = undefined;
     const logoProps = {
       href: 'https://patternfly.org',
       // eslint-disable-next-line no-console
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDemo/FilteringSelectDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDemo/FilteringSelectDemo.tsx
index ae1d4df7395..596b4269836 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDemo/FilteringSelectDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/SelectDemo/FilteringSelectDemo.tsx
@@ -1,4 +1,4 @@
-import { Select, SelectOption, SelectGroup, SelectVariant } from '@patternfly/react-core';
+import { Select, SelectOption, SelectOptionObject, SelectGroup, SelectVariant } from '@patternfly/react-core';
 import React, { Component } from 'react';
 
 /* eslint-disable no-console */
@@ -10,7 +10,7 @@ export interface FilteringSelectDemoState {
 export class FilteringSelectDemo extends Component<FilteringSelectDemoState> {
   state = {
     isOpen: false,
-    selections: []
+    selections: ['']
   };
 
   options = [
@@ -34,9 +34,9 @@ export class FilteringSelectDemo extends Component<FilteringSelectDemoState> {
     });
   };
 
-  onSelect = (event: React.ChangeEvent, selection: string) => {
+  onSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
     const { selections } = this.state;
-    if (selections.includes(selection)) {
+    if (selections.includes(selection.toString())) {
       this.setState(
         (prevState: FilteringSelectDemoState) => ({
           selections: prevState.selections.filter(item => item !== selection)
@@ -65,9 +65,11 @@ export class FilteringSelectDemo extends Component<FilteringSelectDemoState> {
           });
           if (filteredGroup.props.children.length > 0) {
             return filteredGroup;
+          } else {
+            return <></>;
           }
         })
-        .filter(newGroup => newGroup);
+        .filter(newGroup => newGroup.props.children);
     }
   };
 
@@ -91,7 +93,7 @@ export class FilteringSelectDemo extends Component<FilteringSelectDemoState> {
           aria-label="Select Input"
           onToggle={this.onToggle}
           onSelect={this.onSelect}
-          selections={selections}
+          selections={selections.filter(string => string)}
           isOpen={isOpen}
           placeholderText="Filter by status"
           aria-labelledby={titleId}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SelectDemo/SelectDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SelectDemo/SelectDemo.tsx
index afedc81e02e..82e1878ef7e 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/SelectDemo/SelectDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/SelectDemo/SelectDemo.tsx
@@ -42,6 +42,7 @@ export interface SelectDemoState {
   customTypeaheadMultiSelected: string[];
   direction: SelectDirection.up | SelectDirection.down;
   typeaheadOptions: TypeAheadOption[];
+  typeaheadIsCreatable: boolean;
   typeaheadNewOptions: boolean;
   customContentisOpen: boolean;
   noBadgeCheckIsOpen: boolean;
@@ -51,26 +52,26 @@ export interface SelectDemoState {
 export class SelectDemo extends Component<SelectDemoState> {
   state = {
     singleisOpen: false,
-    singleSelected: null,
-    disabledSingleisOpen: null,
+    singleSelected: '',
+    disabledSingleisOpen: false,
     disabledSingleSelected: '',
     customSingleisOpen: false,
-    customSingleSelected: null,
+    customSingleSelected: '',
     checkisOpen: false,
-    checkSelected: [],
+    checkSelected: [''],
     typeaheadisOpen: false,
     noBadgeCheckIsOpen: false,
-    noBadgeCheckSelected: [],
-    typeaheadSelected: null,
+    noBadgeCheckSelected: [''],
+    typeaheadSelected: '',
     typeaheadMultiisOpen: false,
-    typeaheadMultiSelected: [],
+    typeaheadMultiSelected: [''],
     cdtypeaheadMultiisOpen: false,
-    cdtypeaheadMultiSelected: [],
+    cdtypeaheadMultiSelected: [''],
     plainTypeaheadMultiisOpen: false,
-    plainTypeaheadMultiSelected: [],
+    plainTypeaheadMultiSelected: [''],
     plainTypeaheadMultiIsPlain: true,
     customTypeaheadMultiisOpen: false,
-    customTypeaheadMultiSelected: [],
+    customTypeaheadMultiSelected: [''],
     direction: SelectDirection.down,
     typeaheadOptions: [
       { value: 'Alabama', disabled: false },
@@ -210,7 +211,11 @@ export class SelectDemo extends Component<SelectDemoState> {
     });
   };
 
-  singleOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string, isPlaceholder: boolean) => {
+  singleOnSelect = (
+    event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject,
+    isPlaceholder?: boolean
+  ) => {
     if (isPlaceholder) {
       this.clearSelection();
     } else {
@@ -224,8 +229,8 @@ export class SelectDemo extends Component<SelectDemoState> {
 
   disabledSingleOnSelect = (
     _event: React.MouseEvent | React.ChangeEvent,
-    selection: string,
-    isPlaceholder: boolean
+    selection: string | SelectOptionObject,
+    isPlaceholder?: boolean
   ) => {
     if (isPlaceholder) {
       this.clearSelection();
@@ -241,7 +246,7 @@ export class SelectDemo extends Component<SelectDemoState> {
   customSingleOnSelect = (
     _event: React.MouseEvent | React.ChangeEvent,
     selection: string | SelectOptionObject | (string | SelectOptionObject)[],
-    isPlaceholder: boolean
+    isPlaceholder?: boolean
   ) => {
     if (isPlaceholder) {
       this.clearSelection();
@@ -254,9 +259,9 @@ export class SelectDemo extends Component<SelectDemoState> {
     }
   };
 
-  checkOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string) => {
+  checkOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
     const { checkSelected } = this.state;
-    if (checkSelected.includes(selection)) {
+    if (checkSelected.includes(selection.toString())) {
       this.setState(
         (prevState: SelectDemoState) => ({ checkSelected: prevState.checkSelected.filter(item => item !== selection) }),
         () => console.log('selections: ', this.state.checkSelected)
@@ -269,9 +274,9 @@ export class SelectDemo extends Component<SelectDemoState> {
     }
   };
 
-  noBadgeCheckOnSelect = (event: any, selection: string) => {
+  noBadgeCheckOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
     const { noBadgeCheckSelected } = this.state;
-    if (noBadgeCheckSelected.includes(selection)) {
+    if (noBadgeCheckSelected.includes(selection.toString())) {
       this.setState(
         (prevState: SelectDemoState) => ({
           noBadgeCheckSelected: prevState.noBadgeCheckSelected.filter(item => item !== selection)
@@ -286,7 +291,11 @@ export class SelectDemo extends Component<SelectDemoState> {
     }
   };
 
-  typeaheadOnSelect = (event: any, selection: string | object, isPlaceholder: boolean) => {
+  typeaheadOnSelect = (
+    _event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject | (string | SelectOptionObject)[],
+    isPlaceholder?: boolean
+  ) => {
     if (isPlaceholder) {
       this.clearSelection();
     } else {
@@ -298,9 +307,9 @@ export class SelectDemo extends Component<SelectDemoState> {
     }
   };
 
-  typeaheadMultiOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string) => {
+  typeaheadMultiOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
     const { typeaheadMultiSelected } = this.state;
-    if (typeaheadMultiSelected.includes(selection)) {
+    if (typeaheadMultiSelected.includes(selection.toString())) {
       this.setState(
         (prevState: SelectDemoState) => ({
           typeaheadMultiSelected: prevState.typeaheadMultiSelected.filter(item => item !== selection)
@@ -309,15 +318,17 @@ export class SelectDemo extends Component<SelectDemoState> {
       );
     } else {
       this.setState(
-        (prevState: SelectDemoState) => ({ typeaheadMultiSelected: [...prevState.typeaheadMultiSelected, selection] }),
+        (prevState: SelectDemoState) => ({
+          typeaheadMultiSelected: [...prevState.typeaheadMultiSelected, selection.toString()]
+        }),
         () => console.log('selections: ', this.state.typeaheadMultiSelected)
       );
     }
   };
 
-  cdtypeaheadMultiOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string) => {
+  cdtypeaheadMultiOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
     const { cdtypeaheadMultiSelected } = this.state;
-    if (cdtypeaheadMultiSelected.includes(selection)) {
+    if (cdtypeaheadMultiSelected.includes(selection.toString())) {
       this.setState(
         (prevState: SelectDemoState) => ({
           cdtypeaheadMultiSelected: prevState.cdtypeaheadMultiSelected.filter(item => item !== selection)
@@ -327,16 +338,19 @@ export class SelectDemo extends Component<SelectDemoState> {
     } else {
       this.setState(
         (prevState: SelectDemoState) => ({
-          cdtypeaheadMultiSelected: [...prevState.cdtypeaheadMultiSelected, selection]
+          cdtypeaheadMultiSelected: [...prevState.cdtypeaheadMultiSelected, selection.toString()]
         }),
         () => console.log('selections: ', this.state.cdtypeaheadMultiSelected)
       );
     }
   };
 
-  plainTypeaheadMultiOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string) => {
+  plainTypeaheadMultiOnSelect = (
+    event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject
+  ) => {
     const { plainTypeaheadMultiSelected } = this.state;
-    if (plainTypeaheadMultiSelected.includes(selection)) {
+    if (plainTypeaheadMultiSelected.includes(selection.toString())) {
       this.setState(
         (prevState: SelectDemoState) => ({
           plainTypeaheadMultiSelected: prevState.plainTypeaheadMultiSelected.filter(item => item !== selection)
@@ -346,16 +360,19 @@ export class SelectDemo extends Component<SelectDemoState> {
     } else {
       this.setState(
         (prevState: SelectDemoState) => ({
-          plainTypeaheadMultiSelected: [...prevState.plainTypeaheadMultiSelected, selection]
+          plainTypeaheadMultiSelected: [...prevState.plainTypeaheadMultiSelected, selection.toString()]
         }),
         () => console.log('selections: ', this.state.plainTypeaheadMultiSelected)
       );
     }
   };
 
-  customTypeaheadMultiOnSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string) => {
+  customTypeaheadMultiOnSelect = (
+    event: React.MouseEvent | React.ChangeEvent,
+    selection: string | SelectOptionObject
+  ) => {
     const { customTypeaheadMultiSelected } = this.state;
-    if (customTypeaheadMultiSelected.includes(selection)) {
+    if (customTypeaheadMultiSelected.includes(selection.toString())) {
       this.setState(
         (prevState: SelectDemoState) => ({
           customTypeaheadMultiSelected: prevState.customTypeaheadMultiSelected.filter(item => item !== selection)
@@ -365,7 +382,7 @@ export class SelectDemo extends Component<SelectDemoState> {
     } else {
       this.setState(
         (prevState: SelectDemoState) => ({
-          customTypeaheadMultiSelected: [...prevState.customTypeaheadMultiSelected, selection]
+          customTypeaheadMultiSelected: [...prevState.customTypeaheadMultiSelected, selection.toString()]
         }),
         () => console.log('selections: ', this.state.customTypeaheadMultiSelected)
       );
@@ -374,31 +391,31 @@ export class SelectDemo extends Component<SelectDemoState> {
 
   typeaheadCreateNew = (newValue: string) => {
     this.setState({
-      typeaheadOptions: [...this.state.typeaheadOptions, { value: newValue }]
+      typeaheadOptions: [...this.state.typeaheadOptions, { value: newValue, disabled: false }]
     });
   };
 
   clearSelection = () => {
     this.setState({
-      singleSelected: null,
+      singleSelected: '',
       singleisOpen: false,
-      disabledSingleisOpen: null,
+      disabledSingleisOpen: false,
       disabledSingleSelected: '',
-      customSingleSelected: null,
+      customSingleSelected: '',
       customSingleisOpen: false,
-      checkSelected: [],
+      checkSelected: [''],
       checkisOpen: false,
-      noBadgeCheckSelected: [],
+      noBadgeCheckSelected: [''],
       noBadgeCheckIsOpen: false,
-      typeaheadSelected: null,
+      typeaheadSelected: '',
       typeaheadisOpen: false,
-      typeaheadMultiSelected: [],
+      typeaheadMultiSelected: [''],
       typeaheadMultiisOpen: false,
       cdtypeaheadMultiisOpen: false,
-      cdtypeaheadMultiSelected: [],
-      plainTypeaheadMultiSelected: [],
+      cdtypeaheadMultiSelected: [''],
+      plainTypeaheadMultiSelected: [''],
       plainTypeaheadMultiisOpen: false,
-      customTypeaheadMultiSelected: [],
+      customTypeaheadMultiSelected: [''],
       customTypeaheadMultiisOpen: false
     });
   };
@@ -560,7 +577,7 @@ export class SelectDemo extends Component<SelectDemoState> {
             aria-label="Select Input"
             onToggle={this.checkOnToggle}
             onSelect={this.checkOnSelect}
-            selections={checkSelected}
+            selections={checkSelected.filter(string => string)}
             isOpen={checkisOpen}
             placeholderText="Filter by status"
             aria-labelledby={titleId}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableBreakpointModifiersDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableBreakpointModifiersDemo.tsx
index 257155c7d4e..95b8c65f07e 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableBreakpointModifiersDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableBreakpointModifiersDemo.tsx
@@ -22,17 +22,30 @@ export class TableBreakpointModifersDemo extends React.Component<TableProps, Tab
       columns: [
         {
           title: 'Repositories',
-          columnTransforms: [classNames(Visibility.hidden, Visibility.visibleOnMd, Visibility.hiddenOnLg)]
+          columnTransforms: [
+            classNames(
+              Visibility.hidden ? Visibility.hidden : '',
+              Visibility.visibleOnMd ? Visibility.visibleOnMd : '',
+              Visibility.hiddenOnLg ? Visibility.hiddenOnLg : ''
+            )
+          ]
         },
         'Branches',
         {
           title: 'Pull requests',
-          columnTransforms: [classNames(Visibility.hiddenOnMd, Visibility.visibleOnLg)]
+          columnTransforms: [
+            classNames(
+              Visibility.hiddenOnMd ? Visibility.hiddenOnMd : '',
+              Visibility.visibleOnLg ? Visibility.visibleOnLg : ''
+            )
+          ]
         },
         'Workspaces',
         {
           title: 'Last Commit',
-          columnTransforms: [classNames(Visibility.hidden, Visibility.visibleOnSm)]
+          columnTransforms: [
+            classNames(Visibility.hidden ? Visibility.hidden : '', Visibility.visibleOnSm ? Visibility.visibleOnSm : '')
+          ]
         }
       ],
       rows: [
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx
index 5fd821294dd..5974af346f5 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx
@@ -198,7 +198,7 @@ export class TableEditableDemo extends React.Component<TableProps, { columns: (I
     window.scrollTo(0, 0);
   }
 
-  updateEditableRows: OnRowEdit = (evt, type, isEditable, rowIndex, validationErrors) => {
+  updateEditableRows: OnRowEdit = (evt, type, isEditable, rowIndex = 0, validationErrors) => {
     const newRows = Array.from(this.state.rows);
 
     if (validationErrors && Object.keys(validationErrors).length) {
@@ -228,7 +228,10 @@ export class TableEditableDemo extends React.Component<TableProps, { columns: (I
 
   handleTextInputChange = (newValue: string, evt: React.FormEvent, rowIndex: number, cellIndex: number) => {
     const newRows = Array.from(this.state.rows);
-    (newRows[rowIndex].cells[cellIndex] as IRowCell).props.editableValue = newValue;
+    const rowCells = newRows[rowIndex].cells;
+    if (rowCells) {
+      (rowCells[cellIndex] as IRowCell).props.editableValue = newValue;
+    }
     this.setState({
       rows: newRows
     });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx
index 768198c23ae..093efb3f270 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx
@@ -18,8 +18,8 @@ interface ITableRowClickDemoState {
 
 export class TableRowClickDemo extends React.Component<TableProps, ITableRowClickDemoState> {
   rowClickHandler: (event: React.MouseEvent, row: IRow, rowProps: IExtraRowData, computedData: IComputedData) => void;
-  constructor(props: {}) {
-    super(props as null);
+  constructor(props: TableProps) {
+    super(props);
     this.state = {
       columns: [{ title: 'Repositories' }, 'Branches', { title: 'Pull requests' }, 'Workspaces'],
       rows: [
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
index 97a3867ef9e..fb10539cc53 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
@@ -27,7 +27,9 @@ export class TableRowWrapperDemo extends React.Component<TableProps, ITableRowWr
         }
       ]
     };
-    this.customRowWrapper = ({ trRef, className, rowProps, row: { isExpanded, isHeightAuto }, ...rest }) => {
+    this.customRowWrapper = ({ trRef, className, rowProps = { rowIndex: 0, rowKey: '' }, ...rest }) => {
+      const isExpanded = rest.row ? rest.row.isExpanded : false;
+      const isHeightAuto = rest.row ? rest.row.isHeightAuto : false;
       const isOddRow = (rowProps.rowIndex + 1) % 2;
       const customStyle = {
         borderLeft: '3px solid var(--pf-global--primary-color--100)'
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableForCompoundExpandableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableForCompoundExpandableDemo.tsx
index 086250ff564..948b9d3b6db 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableForCompoundExpandableDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableForCompoundExpandableDemo.tsx
@@ -38,18 +38,28 @@ export class DemoSortableTable extends React.Component<DemoSortableTableProps, D
         'Workspaces',
         'Last Commit'
       ],
-      rows: [this.props.firstColumnRows, ['a', 'two', 'k', 'four', 'five'], ['p', 'two', 'b', 'four', 'five']],
+      rows: [
+        this.props.firstColumnRows ? this.props.firstColumnRows : [''],
+        ['a', 'two', 'k', 'four', 'five'],
+        ['p', 'two', 'b', 'four', 'five']
+      ],
       sortBy: {}
     };
   }
 
   onSort = (_event: React.MouseEvent, index: number, direction: SortByDirection) => {
-    const sortedRows = this.state.rows.sort((a, b) => {
-      if (a[index] < b[index]) {
-        return -1;
+    const sortedRows = this.state.rows.sort(
+      (a: { [index: number]: IRow | string }, b: { [index: number]: IRow | string }) => {
+        if (a && b) {
+          if (a[index] < b[index]) {
+            return -1;
+          }
+          return a[index] > b[index] ? 1 : 0;
+        } else {
+          return 0;
+        }
       }
-      return a[index] > b[index] ? 1 : 0;
-    });
+    );
 
     this.setState({
       sortBy: {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx
index 650b7cdb2d0..53abb84f61d 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsDemo.tsx
@@ -12,7 +12,7 @@ export class TabDemo extends Component {
   private contentRef3: RefObject<HTMLDivElement>;
 
   constructor(props: {}) {
-    super(props as null);
+    super(props);
 
     this.contentRef1 = React.createRef<HTMLDivElement>();
     this.contentRef2 = React.createRef<HTMLDivElement>();
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx
index 41e381070d1..fe35717a99a 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TabsDemo/TabsStringEventKeyDemo.tsx
@@ -11,7 +11,7 @@ export class TabsStringEventKeyDemo extends Component {
   private contentRefThree: RefObject<HTMLDivElement>;
 
   constructor(props: {}) {
-    super(props as null);
+    super(props);
 
     this.contentRefOne = React.createRef<HTMLDivElement>();
     this.contentRefTwo = React.createRef<HTMLDivElement>();
diff --git a/packages/react-integration/demo-app-ts/tsconfig.json b/packages/react-integration/demo-app-ts/tsconfig.json
index be437870097..cf94c6852ed 100644
--- a/packages/react-integration/demo-app-ts/tsconfig.json
+++ b/packages/react-integration/demo-app-ts/tsconfig.json
@@ -22,9 +22,9 @@
     "alwaysStrict": true,
     "strictBindCallApply": true,
     "strictPropertyInitialization": false,
-    "noImplicitAny": false,
+    "noImplicitAny": true,
     "strictNullChecks": false,
-    "strictFunctionTypes": false,
+    "strictFunctionTypes": true,
   },
   "include": [
     "src"