diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/GenericComponent.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/GenericComponent.test.tsx
index 95288bd1c6f..fdfb7011da0 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/GenericComponent.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/GenericComponent.test.tsx
@@ -51,9 +51,7 @@ describe('>>> components/GenericComponent.tsx', () => {
 
     const formData = getFormDataStateMock({
       formData: {
-        mockId: {
-          mockDataBinding: 'value',
-        },
+        mockDataBinding: 'value',
       },
     });
 
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/advanced/AddressComponent.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/advanced/AddressComponent.test.tsx
index ed1fad1d7ed..2421089e5d8 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/advanced/AddressComponent.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/advanced/AddressComponent.test.tsx
@@ -2,12 +2,13 @@
 import { mount, shallow } from 'enzyme';
 import 'jest';
 import * as React from 'react';
+import { IComponentProps } from 'src/components';
 import { AddressComponent } from '../../../src/components/advanced/AddressComponent';
 
 describe('components > advanced > AddressComponent', () => {
   const mockId = 'mock-id';
   const mockFormData = { address: 'adresse 1' };
-  const mockHandleDataChange = (data: any) => '';
+  const mockHandleDataChange = (data: string) => '';
   const mockGetTextResource = (resourceKey: string) => 'test';
   const mockIsValid = true;
   const mockSimplified = true;
@@ -48,6 +49,7 @@ describe('components > advanced > AddressComponent', () => {
         required={mockRequired}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     expect(shallowAddressComponent.find('input').length).toBe(3);
@@ -68,6 +70,7 @@ describe('components > advanced > AddressComponent', () => {
         required={mockRequired}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     expect(shallowAddressComponent.find('.address-component-small-inputs').hasClass('disabled')).toBe(false);
@@ -88,6 +91,7 @@ describe('components > advanced > AddressComponent', () => {
         required={mockRequired}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     shallowAddressComponent.find('input').forEach((node: any) => {
@@ -110,6 +114,7 @@ describe('components > advanced > AddressComponent', () => {
         required={mockRequired}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     shallowAddressComponent.find('input').forEach((node: any) => {
@@ -133,6 +138,7 @@ describe('components > advanced > AddressComponent', () => {
         required={false}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     expect(shallowAddressComponent.find('span.label-optional')).toHaveLength(2);
@@ -154,6 +160,7 @@ describe('components > advanced > AddressComponent', () => {
         labelSettings={{ optionalIndicator: false }}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     expect(shallowAddressComponent.find('.label-optional')).toHaveLength(0);
@@ -175,6 +182,7 @@ describe('components > advanced > AddressComponent', () => {
         required={false}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />);
     const input = component.find(`#address_zip_code_${mockId}`);
     input.simulate('change', { target: { value: '123'}})
@@ -198,6 +206,7 @@ describe('components > advanced > AddressComponent', () => {
         required={false}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />);
     const input = component.find(`#address_zip_code_${mockId}`);
     input.simulate('change', { target: { value: ''}})
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/AttachmentListComponent.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/AttachmentListComponent.test.tsx
index 7df25274e9a..a5b87c481ad 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/AttachmentListComponent.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/AttachmentListComponent.test.tsx
@@ -71,7 +71,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
       id: mockId,
       text: 'Attachments',
       dataTypeIds: ['test-data-type-1'],
-    };
+    } as IAttachmentListProps;
 
     return render(
       <Provider store={mockStore}>
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/ButtonComponent.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/ButtonComponent.test.tsx
index 1291c547248..fc1fd168dff 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/ButtonComponent.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/ButtonComponent.test.tsx
@@ -5,6 +5,7 @@ import configureStore from 'redux-mock-store';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { ButtonComponent } from '../../../src/components/base/ButtonComponent';
+import { IComponentProps } from 'src/components';
 
 describe('components/base/ButtonComponent.tsx', () => {
   let mockId: string;
@@ -61,6 +62,7 @@ describe('components/base/ButtonComponent.tsx', () => {
           disabled={mockDisabled}
           formDataCount={formDataCount}
           language={mockLanguage}
+          {...({} as IComponentProps)}
         />
       </Provider>
     );
@@ -78,6 +80,7 @@ describe('components/base/ButtonComponent.tsx', () => {
           disabled={mockDisabled}
           formDataCount={formDataCount}
           language={mockLanguage}
+          {...({} as IComponentProps)}
         />
       </Provider>
     );
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/DropdownComponent.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/DropdownComponent.test.tsx
index dbb4028f5f1..c095301d8ad 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/DropdownComponent.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/DropdownComponent.test.tsx
@@ -4,6 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import { render } from '@testing-library/react';
 import DropdownComponent from '../../../src/components/base/DropdownComponent';
+import { IComponentProps } from 'src/components';
 
 describe('>>> components/base/DropdownComponent.tsx --- Snapshot', () => {
   let mockId: string;
@@ -47,6 +48,7 @@ describe('>>> components/base/DropdownComponent.tsx --- Snapshot', () => {
           optionsId={mockOptionsId}
           isValid={mockIsValid}
           readOnly={false}
+          {...({} as IComponentProps)}
         />
       </Provider>,
     );
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/FileUploadComponent.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/FileUploadComponent.test.tsx
index d53d3a46cc5..53da5ddcf70 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/FileUploadComponent.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/FileUploadComponent.test.tsx
@@ -9,6 +9,7 @@ import { render } from '@testing-library/react';
 import { bytesInOneMB, FileUploadComponent, IFileUploadProps } from '../../../src/components/base/FileUploadComponent';
 import { getFileEnding, removeFileEnding } from '../../../src/utils/attachment';
 import { getFileUploadComponentValidations } from '../../../src/utils/formComponentUtils';
+import { IComponentProps } from 'src/components';
 
 
 describe('>>> components/base/FileUploadComponent.tsx', () => {
@@ -79,6 +80,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
           maxNumberOfAttachments={mockMaxNumberOfAttachments}
           minNumberOfAttachments={mockMinNumberOfAttachments}
           readOnly={mockReadOnly}
+          {...({} as IComponentProps)}
         />
       </Provider>
     );
@@ -207,6 +209,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
           maxNumberOfAttachments={mockMaxNumberOfAttachments}
           minNumberOfAttachments={mockMinNumberOfAttachments}
           readOnly={mockReadOnly}
+          {...({} as IComponentProps)}
         />
       </Provider>
     );
@@ -272,7 +275,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
       minNumberOfAttachments: mockMinNumberOfAttachments,
       isValid: mockIsValid,
       readOnly: mockReadOnly,
-    };
+    } as IFileUploadProps;
 
     return render(
       <Provider store={mockStore}>
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/HeaderComponent.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/HeaderComponent.test.tsx
index 632afc63cfe..df803b397e7 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/HeaderComponent.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/HeaderComponent.test.tsx
@@ -7,6 +7,7 @@ import {
 } from '@testing-library/react';
 
 import { HeaderComponent } from '../../../src/components/base/HeaderComponent';
+import { IComponentProps } from 'src/components';
 
 const render = (props = {}) => {
   const allProps = {
@@ -16,7 +17,7 @@ const render = (props = {}) => {
     language: {},
     textResourceBindings: {},
     ...props,
-  };
+  } as IComponentProps;
 
   rtlRender(<HeaderComponent {...allProps} />);
 };
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/InputComponent.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/InputComponent.test.tsx
index c13b0210abb..8656a70d5ec 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/InputComponent.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/InputComponent.test.tsx
@@ -4,6 +4,7 @@ import 'jest';
 import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { InputComponent, IInputProps } from '../../../src/components/base/InputComponent';
+import { IComponentProps } from 'src/components';
 
 describe('components/base/InputComponent.tsx', () => {
   let mockId: string;
@@ -35,7 +36,7 @@ describe('components/base/InputComponent.tsx', () => {
   });
 
   test('components/base/InputComponent.tsx -- should have correct value with specified form data', async () => {
-    const customProps = { formData: 'Test123' };
+    const customProps:Partial<IComponentProps> = { formData: {simpleBinding:'Test123'} };
     const { findByTestId } = renderInputComponent(customProps);
     const inputComponent: any = await findByTestId(mockId);
 
@@ -69,7 +70,7 @@ describe('components/base/InputComponent.tsx', () => {
           prefix: '$',
         },
       },
-      formData: '1234',
+      formData: {simpleBinding:'1234'},
     });
     const inputComponent: any = await findByTestId(`${mockId}-formatted-number`);
     expect(inputComponent.value).toEqual('$1,234');
@@ -83,7 +84,7 @@ describe('components/base/InputComponent.tsx', () => {
       isValid: mockIsValid,
       readOnly: mockReadOnly,
       required: mockRequired,
-    };
+    } as unknown as IInputProps;
 
     return render(<InputComponent {...defaultProps} {...props}/>);
   }
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/ParagraphComponent.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/ParagraphComponent.test.tsx
index fced72e20cd..a5d11ae7c36 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/ParagraphComponent.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/ParagraphComponent.test.tsx
@@ -3,20 +3,16 @@ import { shallow } from 'enzyme';
 import 'jest';
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
+import { IComponentProps } from 'src/components';
 import { ParagraphComponent } from '../../../src/components/base/ParagraphComponent';
 import { ITextResourceBindings } from '../../../src/features/form/layout';
 
 describe('>>> components/base/ParagraphComponent.tsx --- Snapshot', () => {
-  let mockId: string;
-  let mockText: string;
-  let mockGetTextResource: (key: string) => string;
-  let mockLanguage: any;
-  let mockTextResourceBindings: ITextResourceBindings;
-  mockId = 'mock-id';
-  mockText = 'Here goes a paragraph';
-  mockGetTextResource = (key: string) => key;
-  mockLanguage = {};
-  mockTextResourceBindings = {
+  const mockId = 'mock-id';
+  const mockText = 'Here goes a paragraph';
+  const mockGetTextResource = (key: string) => key;
+  const mockLanguage: any = {};
+  const mockTextResourceBindings: ITextResourceBindings = {
     tile: mockText,
   }
 
@@ -28,6 +24,7 @@ describe('>>> components/base/ParagraphComponent.tsx --- Snapshot', () => {
         language={mockLanguage}
         getTextResource={mockGetTextResource}
         textResourceBindings={mockTextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     expect(rendered).toMatchSnapshot();
@@ -40,6 +37,7 @@ describe('>>> components/base/ParagraphComponent.tsx --- Snapshot', () => {
         language={mockLanguage}
         getTextResource={mockGetTextResource}
         textResourceBindings={mockTextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
 
@@ -53,7 +51,8 @@ describe('>>> components/base/ParagraphComponent.tsx --- Snapshot', () => {
         text={mockText}
         language={mockLanguage}
         getTextResource={mockGetTextResource}
-        textResourceBindings={{ help: 'this is the help text'}}
+        textResourceBindings={{ help: 'this is the help text' }}
+        {...({} as IComponentProps)}
       />,
     );
 
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/TextAreaComponent.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/TextAreaComponent.test.tsx
index 1fe8af75d62..a5f4fa7a287 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/TextAreaComponent.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/TextAreaComponent.test.tsx
@@ -4,8 +4,9 @@ import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 
 import { mount } from 'enzyme';
-import { TextAreaComponent, ITextAreaComponentProps } from '../../../src/components/base/TextAreaComponent';
+import { TextAreaComponent } from '../../../src/components/base/TextAreaComponent';
 import { render, fireEvent } from '@testing-library/react';
+import { IComponentProps } from 'src/components';
 
 describe('>>> components/base/TextAreaComponent.tsx', () => {
   let mockId: string;
@@ -30,6 +31,7 @@ describe('>>> components/base/TextAreaComponent.tsx', () => {
         handleDataChange={mockHandleDataChange}
         isValid={mockIsValid}
         readOnly={mockReadOnly}
+        {...({} as IComponentProps)}
       />,
     );
     expect(rendered).toMatchSnapshot();
@@ -52,6 +54,7 @@ describe('>>> components/base/TextAreaComponent.tsx', () => {
         handleDataChange={mockHandleDataChange}
         isValid={mockIsValid}
         readOnly={mockReadOnly}
+        {...({} as IComponentProps)}
       />,
     );
     expect(wrapper.find('textarea').hasClass('disabled')).toBe(false);
@@ -66,20 +69,21 @@ describe('>>> components/base/TextAreaComponent.tsx', () => {
         handleDataChange={mockHandleDataChange}
         isValid={mockIsValid}
         readOnly={true}
+        {...({} as IComponentProps)}
       />,
     );
     expect(wrapper.find('textarea').hasClass('disabled')).toBe(true);
     expect(wrapper.find('textarea').prop('readOnly')).toBe(true);
   });
 
-  function renderTextAreaComponent(props: Partial<ITextAreaComponentProps> = {}) {
-    const defaultProps: ITextAreaComponentProps = {
+  function renderTextAreaComponent(props: Partial<IComponentProps> = {}) {
+    const defaultProps: IComponentProps = {
       id: mockId,
       formData: mockFormData,
       handleDataChange: mockHandleDataChange,
       isValid: mockIsValid,
       readOnly: mockReadOnly,
-    };
+    } as IComponentProps;
 
     return render(<TextAreaComponent {...defaultProps} {...props}/>);
   }
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/presentation/NavigationButton.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/presentation/NavigationButton.test.tsx
index 1893c542676..f52a5fb5f57 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/presentation/NavigationButton.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/presentation/NavigationButton.test.tsx
@@ -7,6 +7,7 @@ import { render, screen } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { getFormLayoutStateMock, getInitialStateMock } from '../../../__mocks__/mocks';
 import { NavigationButtons } from '../../../src/components/presentation/NavigationButtons';
+import { IComponentProps } from 'src/components';
 
 describe('>>> components/presentation/NavigationButton.tsx', () => {
   let mockStore;
@@ -92,6 +93,7 @@ describe('>>> components/presentation/NavigationButton.tsx', () => {
           id='nav-button-1'
           showBackButton={false}
           textResourceBindings={null}
+          {...({} as IComponentProps)}
         />
       </Provider>,
     );
@@ -107,6 +109,7 @@ describe('>>> components/presentation/NavigationButton.tsx', () => {
           id='nav-button-1'
           showBackButton={true}
           textResourceBindings={null}
+          {...({} as IComponentProps)}
         />
       </Provider>,
     );
@@ -136,6 +139,7 @@ describe('>>> components/presentation/NavigationButton.tsx', () => {
           id='nav-button-2'
           showBackButton={true}
           textResourceBindings={null}
+          {...({} as IComponentProps)}
         />
       </Provider>,
     );
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/features/form/data/submitFormDataSagas.test.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/features/form/data/submitFormDataSagas.test.ts
index dae07fa94cb..246eef79069 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/features/form/data/submitFormDataSagas.test.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/features/form/data/submitFormDataSagas.test.ts
@@ -53,7 +53,7 @@ describe('submitFormDataSagas', () => {
       formData: getFormDataStateMock({
         formData: {
           field1: 'value1',
-          field2: 123,
+          field2: '123',
         },
       }),
     };
@@ -89,9 +89,7 @@ describe('submitFormDataSagas', () => {
       },
       formData: {
         ...stateMock.formData,
-        formData: {
-          formData,
-        },
+        formData: formData,
       },
       formLayout: {
         ...stateMock.formLayout,
@@ -125,11 +123,13 @@ describe('submitFormDataSagas', () => {
         }],
       ])
       .call(saveStatelessData, state, model)
-      .put(FormDataActions.fetchFormDataFulfilled({ formData:
+      .put(FormDataActions.fetchFormDataFulfilled({
+        formData:
         {
           ...formData,
           'group.field1': 'value1',
-        } }))
+        }
+      }))
       .call(FormDynamicsActions.checkIfConditionalRulesShouldRun)
       .put(FormDataActions.submitFormDataFulfilled())
       .run();
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/conditionalRendering.test.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/conditionalRendering.test.ts
index 7c6a78ff138..a8e62255f6b 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/conditionalRendering.test.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/conditionalRendering.test.ts
@@ -156,7 +156,7 @@ describe('>>> utils/conditionalRendering.ts', () => {
     };
 
     const formData = {
-      'mockGroup[0].mockField': 8,
+      'mockGroup[0].mockField': '8',
     };
 
     const result = runConditionalRenderingRules(showRules, formData, repeatingGroups);
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/formComponentUtils.test.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/formComponentUtils.test.ts
index 6af2fda3a90..bde6b60f5dd 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/formComponentUtils.test.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/formComponentUtils.test.ts
@@ -1,4 +1,4 @@
-import { getDisplayFormData, getFormDataForComponentInRepeatingGroup, isSimpleComponent } from '../../src/utils/formComponentUtils';
+import { getDisplayFormData, getFormDataForComponentInRepeatingGroup, componentValidationsHandledByGenericComponent } from '../../src/utils/formComponentUtils';
 import { IOptions, ITextResource } from '../../src/types';
 import { IFormData } from '../../src/features/form/data/formDataReducer';
 import { ILayoutComponent, ISelectionComponentProps } from '../../src/features/form/layout';
@@ -85,33 +85,33 @@ describe('>>> utils/formComponentUtils.ts', () => {
     expect(result).toEqual('RepValue1, RepValue2, RepValue3');
   });
 
-  it('+++ isSimpleComponent should return false when dataModelBinding is undefined', () => {
+  it('+++ componentValidationsHandledByGenericComponent should return false when dataModelBinding is undefined', () => {
     const genericComponent = {
       type: 'FileUpload',
     }
-    const result = isSimpleComponent(undefined, genericComponent.type);
+    const result = componentValidationsHandledByGenericComponent(undefined, genericComponent.type);
     expect(result).toEqual(false);
   });
 
-  it('+++ isSimpleComponent should return false when component type is Datepicker', () => {
+  it('+++ componentValidationsHandledByGenericComponent should return false when component type is Datepicker', () => {
     const genericComponent = {
       type: 'Datepicker',
       dataModelBindings: {
         simpleBinding: 'group.superdate',
       },
     }
-    const result = isSimpleComponent(genericComponent.dataModelBindings, genericComponent.type);
+    const result = componentValidationsHandledByGenericComponent(genericComponent.dataModelBindings, genericComponent.type);
     expect(result).toEqual(false);
   });
 
-  it('+++ isSimpleComponent should return true when component type is Input', () => {
+  it('+++ componentValidationsHandledByGenericComponent should return true when component type is Input', () => {
     const genericComponent = {
       type: 'Input',
       dataModelBindings: {
         simpleBinding: 'group.secretnumber',
       },
     }
-    const result = isSimpleComponent(genericComponent.dataModelBindings, genericComponent.type);
+    const result = componentValidationsHandledByGenericComponent(genericComponent.dataModelBindings, genericComponent.type);
     expect(result).toEqual(true);
   });
 });
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/rules.test.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/rules.test.tsx
index ec35849f1c6..045efb7f1ac 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/rules.test.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/rules.test.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-undef */
 import 'jest';
-import { IFormData } from '../../src/features/form/data/formDataReducer';
+import { IFormDataState } from '../../src/features/form/data/formDataReducer';
 import { checkIfRuleShouldRun, getRuleModelFields } from '../../src/utils/rules';
 
 describe('>>> features/rules checkIfRuleShouldRun', () => {
   let mockRuleConnectionState: any;
-  let mockFormDataState: IFormData;
+  let mockFormDataState: Partial<IFormDataState>;
   let mockFormLayoutState: any;
   let mockLastUpdatedDataBinding: string;
   let mockRuleHandlerHelper;
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/validation.test.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/validation.test.ts
index caeff3553d4..1f38dd19bfe 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/validation.test.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/utils/validation.test.ts
@@ -21,8 +21,8 @@ describe('utils > validation', () => {
   let mockLayoutState: any;
   let mockJsonSchema: any;
   let mockInvalidTypes: any;
-  let mockFormData: IFormData;
-  let mockValidFormData: IFormData;
+  let mockFormData: any;
+  let mockValidFormData: any;
   let mockFormValidationResult: any;
   let mockLanguage: any;
   let mockFormAttachments: any;
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx
index a87ac941df7..714e78fd6fd 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/GenericComponent.tsx
@@ -3,14 +3,13 @@ import { shallowEqual } from 'react-redux';
 import { getTextResourceByKey } from 'altinn-shared/utils';
 import {
   ILabelSettings,
-  ITextResource,
   Triggers,
-  IComponentValidations,
+  IComponentValidations
 } from 'src/types';
 
 import { Grid, makeStyles } from '@material-ui/core';
 import classNames from 'classnames';
-import components from '.';
+import components, { IComponentProps } from '.';
 import FormDataActions from '../features/form/data/formDataActions';
 import {
   IDataModelBindings,
@@ -26,7 +25,7 @@ import Legend from '../features/form/components/Legend';
 import { renderValidationMessagesForComponent } from '../utils/render';
 import {
   getFormDataForComponent,
-  isSimpleComponent,
+  componentValidationsHandledByGenericComponent,
   componentHasValidationMessages,
   getTextResource,
   isComponentValid,
@@ -88,7 +87,6 @@ export function GenericComponent(props: IGenericComponentProps) {
   const classes = useStyles(props);
   const GetHiddenSelector = makeGetHidden();
   const GetFocusSelector = makeGetFocus();
-  const [isSimple, setIsSimple] = React.useState(true);
   const [hasValidationMessages, setHasValidationMessages] =
     React.useState(false);
 
@@ -97,7 +95,7 @@ export function GenericComponent(props: IGenericComponentProps) {
       getFormDataForComponent(state.formData.formData, props.dataModelBindings),
     shallowEqual,
   );
-  const currentView: string = useAppSelector(
+  const currentView = useAppSelector(
     state => state.formLayout.uiConfig.currentView,
   );
   const isValid = useAppSelector(state =>
@@ -106,8 +104,8 @@ export function GenericComponent(props: IGenericComponentProps) {
     ),
   );
   const language = useAppSelector(state => state.language.language);
-  const textResources: ITextResource[] = useAppSelector(state => state.textResources.resources);
-  const texts: any = useAppSelector(state =>
+  const textResources = useAppSelector(state => state.textResources.resources);
+  const texts = useAppSelector(state =>
     selectComponentTexts(
       state.textResources.resources,
       props.textResourceBindings,
@@ -121,10 +119,6 @@ export function GenericComponent(props: IGenericComponentProps) {
     shallowEqual,
   );
 
-  React.useEffect(() => {
-    setIsSimple(isSimpleComponent(props.dataModelBindings, props.type));
-  }, []);
-
   React.useEffect(() => {
     setHasValidationMessages(
       componentHasValidationMessages(componentValidations),
@@ -135,7 +129,7 @@ export function GenericComponent(props: IGenericComponentProps) {
     return null;
   }
 
-  const handleDataUpdate = (value: any, key = 'simpleBinding') => {
+  const handleDataUpdate = (value: string, key = 'simpleBinding') => {
     if (!props.dataModelBindings || !props.dataModelBindings[key]) {
       return;
     }
@@ -144,12 +138,7 @@ export function GenericComponent(props: IGenericComponentProps) {
       return;
     }
 
-    if (formData instanceof Object) {
-      if (formData[key] && formData[key] === value) {
-        // data unchanged, do nothing
-        return;
-      }
-    } else if (formData && formData === value) {
+    if (formData[key] === value) {
       // data unchanged, do nothing
       return;
     }
@@ -272,7 +261,7 @@ export function GenericComponent(props: IGenericComponentProps) {
     return getTextResourceByKey(key, textResources);
   };
 
-  const componentProps = {
+  const componentProps:IComponentProps = {
     handleDataChange: handleDataUpdate,
     handleFocusUpdate,
     getTextResource: getTextResourceWrapper,
@@ -347,7 +336,7 @@ export function GenericComponent(props: IGenericComponentProps) {
       >
         <RenderComponent {...componentProps} />
 
-        {isSimple &&
+        {componentValidationsHandledByGenericComponent(props.dataModelBindings, props.type) &&
           hasValidationMessages &&
           renderValidationMessagesForComponent(
             componentValidations?.simpleBinding,
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/advanced/AddressComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/advanced/AddressComponent.tsx
index ecf78335491..bb1efd78d5f 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/advanced/AddressComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/advanced/AddressComponent.tsx
@@ -6,27 +6,15 @@ import axios from 'axios';
 import * as React from 'react';
 import { getLanguageFromKey, get } from 'altinn-shared/utils';
 import { IComponentValidations, ILabelSettings } from 'src/types';
-import { IDataModelBindings, ITextResourceBindings } from '../../features/form/layout';
 import '../../styles/AddressComponent.css';
 import '../../styles/shared.css';
 import { renderValidationMessagesForComponent } from '../../utils/render';
 import classNames from 'classnames';
-import { ILanguage } from 'altinn-shared/types';
+import { IComponentProps } from '..';
 
-export interface IAddressComponentProps {
-  id: string;
-  formData: { [id: string]: string };
-  handleDataChange: (value: any, key: string) => void;
-  getTextResource: (key: string) => string;
-  isValid?: boolean;
+export interface IAddressComponentProps extends IComponentProps {
   simplified: boolean;
-  dataModelBindings: IDataModelBindings;
-  readOnly: boolean;
-  required: boolean;
   labelSettings?: ILabelSettings;
-  language: ILanguage;
-  textResourceBindings: ITextResourceBindings;
-  componentValidations?: IComponentValidations;
 }
 
 interface IAddressValidationErrors {
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/AttachmentListComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/AttachmentListComponent.tsx
index 4401f134dca..46b79279483 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/AttachmentListComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/AttachmentListComponent.tsx
@@ -3,10 +3,9 @@ import { AltinnAttachment } from 'altinn-shared/components';
 import { mapInstanceAttachments } from 'altinn-shared/utils';
 import { Grid, Typography } from '@material-ui/core';
 import { useAppSelector } from 'src/common/hooks';
+import { IComponentProps } from '..';
 
-export interface IAttachmentListProps {
-  id: string;
-  text: string;
+export interface IAttachmentListProps extends IComponentProps {
   dataTypeIds?: string[];
 }
 
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ButtonComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ButtonComponent.tsx
index 7f50c7d5720..037f36996fb 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ButtonComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ButtonComponent.tsx
@@ -5,15 +5,11 @@ import { AltinnLoader } from 'altinn-shared/components';
 import { IAltinnWindow } from '../../types';
 import FormDataActions from '../../features/form/data/formDataActions';
 import { useAppDispatch, useAppSelector } from 'src/common/hooks';
-import { ILanguage } from 'altinn-shared/types';
+import { IComponentProps } from '..';
 
-export interface IButtonProvidedProps {
-  id: string;
-  text: string;
+export interface IButtonProvidedProps extends IComponentProps {
   disabled: boolean;
-  handleDataChange: (value: any) => void;
   formDataCount: number;
-  language: ILanguage;
 }
 
 const buttonStyle = {
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.tsx
index e633e08cf63..343da0a605b 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.tsx
@@ -7,22 +7,13 @@ import { AltinnAppTheme } from 'altinn-shared/theme';
 import classNames from 'classnames';
 import { renderValidationMessagesForComponent } from '../../utils/render';
 import { useAppSelector } from 'src/common/hooks';
+import { IComponentProps } from '..';
 
-export interface ICheckboxContainerProps {
-  id: string;
-  formData: any;
-  handleDataChange: (value: any) => void;
-  handleFocusUpdate: (value: any) => void;
-  isValid: boolean;
+export interface ICheckboxContainerProps extends IComponentProps {
   validationMessages: any;
   options: any[];
   optionsId: string;
-  preselectedOptionIndex: number;
-  readOnly: boolean;
-  shouldFocus: boolean;
-  legend: () => JSX.Element;
-  getTextResource: (key: string) => JSX.Element;
-  getTextResourceAsString: (key: string) => string;
+  preselectedOptionIndex?: number;
 }
 
 export interface IStyledCheckboxProps extends CheckboxProps {
@@ -99,11 +90,11 @@ export const CheckboxContainerComponent = (props: ICheckboxContainerProps) => {
 
   React.useEffect(() => {
     returnState();
-  }, [props.formData]);
+  }, [props.formData?.simpleBinding]);
 
   const returnState = () => {
     if (
-      !props.formData &&
+      !props.formData?.simpleBinding &&
       props.preselectedOptionIndex >= 0 &&
       options &&
       props.preselectedOptionIndex < options.length
@@ -114,7 +105,7 @@ export const CheckboxContainerComponent = (props: ICheckboxContainerProps) => {
       props.handleDataChange(preSelected[props.preselectedOptionIndex]);
       setSelected(preSelected);
     } else {
-      setSelected(props.formData ? props.formData.toString().split(',') : []);
+      setSelected(props.formData?.simpleBinding ? props.formData.simpleBinding.split(',') : []);
     }
   };
 
@@ -133,7 +124,7 @@ export const CheckboxContainerComponent = (props: ICheckboxContainerProps) => {
   };
 
   const handleOnBlur = () => {
-    props.handleDataChange(props.formData);
+    props.handleDataChange(props.formData?.simpleBinding ?? '');
   };
 
   const selectedHasValues = (select: string[]): boolean => {
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/DatepickerComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/DatepickerComponent.tsx
index d7c15a48a12..72e2a29c31a 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/DatepickerComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/DatepickerComponent.tsx
@@ -17,28 +17,19 @@ import MomentUtils from '@date-io/moment';
 import { getLanguageFromKey } from 'altinn-shared/utils';
 import { AltinnAppTheme } from 'altinn-shared/theme';
 import {
-  IComponentValidations,
   IComponentBindingValidation,
   DateFlags,
 } from 'src/types';
 import { getFlagBasedDate, getISOString } from '../../utils/dateHelpers';
 import { renderValidationMessagesForComponent } from '../../utils/render';
 import { validateDatepickerFormData } from '../../utils/validation';
-import { ILanguage } from 'altinn-shared/types';
+import { IComponentProps } from '..';
 
-export interface IDatePickerProps {
-  id: string;
-  readOnly: boolean;
-  required: boolean;
-  formData: any;
-  handleDataChange: (value: any) => void;
-  isValid?: boolean;
+export interface IDatePickerProps extends IComponentProps {
   timeStamp?: boolean;
   format: string;
   minDate: string;
   maxDate: string;
-  language: ILanguage;
-  componentValidations: IComponentValidations;
 }
 
 const useStyles = makeStyles({
@@ -152,10 +143,10 @@ function DatepickerComponent(props: IDatePickerProps) {
   };
 
   React.useEffect(() => {
-    const dateValue = props.formData ? moment(props.formData) : null;
+    const dateValue = props.formData?.simpleBinding ? moment(props.formData.simpleBinding) : null;
     setDate(dateValue);
     setValidationMessages(getValidationMessages());
-  }, [props.formData]);
+  }, [props.formData?.simpleBinding]);
 
   React.useEffect(() => {
     setValidationMessages(getValidationMessages());
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/DropdownComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/DropdownComponent.tsx
index 15c88c1a791..75dd6207303 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/DropdownComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/DropdownComponent.tsx
@@ -5,15 +5,10 @@ import classNames from 'classnames';
 import { makeStyles } from '@material-ui/core';
 import { AltinnAppTheme } from 'altinn-shared/theme';
 import { useAppSelector } from 'src/common/hooks';
+import { IComponentProps } from '..';
 
-export interface IDropdownProps {
-  formData: string;
-  getTextResourceAsString: (resourceKey: string) => string;
-  handleDataChange: (value: string) => void;
-  id: string;
-  isValid?: boolean;
+export interface IDropdownProps extends IComponentProps {
   optionsId: string;
-  readOnly: boolean;
   preselectedOptionIndex?: number;
 }
 
@@ -46,7 +41,7 @@ function DropdownComponent(props: IDropdownProps) {
 
   const returnState = () => {
     if (
-      !props.formData &&
+      !props.formData?.simpleBinding &&
       props.preselectedOptionIndex >= 0 &&
       options &&
       props.preselectedOptionIndex < options.length
@@ -66,7 +61,7 @@ function DropdownComponent(props: IDropdownProps) {
   return (
     <select
       id={props.id}
-      value={props.formData}
+      value={props.formData?.simpleBinding}
       disabled={props.readOnly}
       className={classNames(classes.select, 'custom-select a-custom-select', {
         'validation-error': !props.isValid,
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/FileUploadComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/FileUploadComponent.tsx
index 3f69d524d66..218ea5338c4 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/FileUploadComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/FileUploadComponent.tsx
@@ -13,19 +13,14 @@ import { IComponentValidations } from '../../types';
 import { renderValidationMessagesForComponent } from '../../utils/render';
 import { v4 as uuidv4 } from 'uuid';
 import { useAppSelector } from 'src/common/hooks';
-import { ILanguage } from 'altinn-shared/types';
+import { IComponentProps } from '..';
 
-export interface IFileUploadProps {
+export interface IFileUploadProps extends IComponentProps {
   displayMode: string;
   hasCustomFileEndings?: boolean;
-  id: string;
-  isValid?: boolean;
-  componentValidations?: IComponentValidations;
-  language: ILanguage;
   maxFileSizeInMB: number;
   maxNumberOfAttachments: number;
   minNumberOfAttachments: number;
-  readOnly: boolean;
   validFileEndings?: string;
 }
 
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/HeaderComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/HeaderComponent.tsx
index c2f37e0f217..f484e2620dc 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/HeaderComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/HeaderComponent.tsx
@@ -1,16 +1,10 @@
 import { Grid } from '@material-ui/core';
-import { ILanguage } from 'altinn-shared/types';
 import * as React from 'react';
 import { HelpTextContainer } from 'src/features/form/components/HelpTextContainer';
-import { ITextResourceBindings } from 'src/types';
+import { IComponentProps } from '..';
 
-export interface IHeaderProps {
-  id: string;
-  text: string;
+export interface IHeaderProps extends IComponentProps {
   size?: string;
-  textResourceBindings: ITextResourceBindings;
-  language: ILanguage;
-  getTextResource: (key: string) => string;
 }
 
 const marginStyling = {
@@ -20,7 +14,7 @@ const marginStyling = {
 
 interface IHeaderSizeProps {
   id: string;
-  text: string;
+  text: React.ReactNode;
   size?: string;
 }
 
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ImageComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ImageComponent.tsx
index 594c463bd28..c9ca92a1c96 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ImageComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ImageComponent.tsx
@@ -1,18 +1,12 @@
 import * as React from 'react';
 import { Grid, GridJustification, makeStyles } from '@material-ui/core';
-import { ITextResourceBindings } from 'src/features/form/layout';
 import { HelpTextContainer } from 'src/features/form/components/HelpTextContainer';
 import { IAltinnWindow } from '../../types';
 import { useAppSelector } from 'src/common/hooks';
-import { ILanguage } from 'altinn-shared/types';
+import { IComponentProps } from '..';
 
-export interface IImageProps {
-  id: string;
+export interface IImageProps extends IComponentProps {
   image: IImage;
-  textResourceBindings: ITextResourceBindings;
-  language: ILanguage;
-  getTextResource: (key: string) => string;
-  getTextResourceAsString: (key: string) => string;
 }
 
 export interface IImage {
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/InputComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/InputComponent.tsx
index e3946bd14e6..f6ac534fd06 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/InputComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/InputComponent.tsx
@@ -4,12 +4,12 @@ import NumberFormat, { NumberFormatProps } from 'react-number-format';
 import { Input } from '@material-ui/core';
 
 import '../../styles/shared.css';
+import { IComponentProps } from '..';
 
-export interface IInputBaseProps {
+export interface IInputBaseProps  {
   id: string;
   readOnly: boolean;
   required: boolean;
-  formatting?: IInputFormatting;
   handleDataChange: (value: any) => void;
 }
 
@@ -18,9 +18,8 @@ export interface IInputFormatting {
   align?: 'right' | 'center' | 'left';
 }
 
-export interface IInputProps extends IInputBaseProps {
-  formData: any;
-  isValid?: boolean;
+export interface IInputProps extends IComponentProps {
+  formatting?: IInputFormatting;
 }
 
 export interface IBasicInputProps extends IInputBaseProps {
@@ -33,6 +32,7 @@ export interface IFormattedNumberInputProps extends IInputBaseProps {
   inputRef: ((el: HTMLInputElement) => void) | React.Ref<any>;
   name: any;
   onChange: (e: any) => void;
+  formatting?: IInputFormatting;
 }
 
 function NumberFormatCustom(props: IFormattedNumberInputProps) {
@@ -67,7 +67,7 @@ export function BasicInputComponent(props: IBasicInputProps) {
 
 export function InputComponent(props: IInputProps) {
   const [value, setValue] = React.useState(
-    props.formData ? props.formData : '',
+    props.formData?.simpleBinding ?? '',
   );
   const {
     id,
@@ -80,8 +80,8 @@ export function InputComponent(props: IInputProps) {
   } = props;
 
   React.useEffect(() => {
-    setValue(formData || '');
-  }, [formData]);
+    setValue(formData?.simpleBinding ?? '');
+  }, [formData?.simpleBinding]);
 
   const onDataChanged = (e: any) => {
     setValue(e.target.value);
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/InstantiationButtonComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/InstantiationButtonComponent.tsx
index dea52b18140..783483caf79 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/InstantiationButtonComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/InstantiationButtonComponent.tsx
@@ -1,13 +1,14 @@
 import { AltinnLoader } from 'altinn-shared/components';
 import * as React from 'react';
 import { useAppSelector } from 'src/common/hooks';
-import { IInstantiationButtonProps } from 'src/features/form/layout';
 import InstantiationActions from 'src/features/instantiate/instantiation/actions';
 import { useInstantiateWithPrefillMutation } from 'src/services/InstancesApi';
 import InstanceDataActions from 'src/shared/resources/instanceData/instanceDataActions';
 import AttachmentActions from 'src/shared/resources/attachments/attachmentActions';
 import { mapFormData } from 'src/utils/databindings';
 import { Redirect } from 'react-router';
+import { IMapping } from 'src/types';
+import { IComponentProps } from '..';
 
 const buttonStyle = {
   marginBottom: '0',
@@ -29,6 +30,9 @@ const altinnLoaderStyle = {
   height: '45px',
 };
 
+export interface IInstantiationButtonProps extends IComponentProps {
+  mapping: IMapping;
+}
 
 export function InstantiationButtonComponent(props: IInstantiationButtonProps) {
   const [instantiateWithPrefill, {isSuccess, data, isLoading, isError}] = useInstantiateWithPrefillMutation();
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ParagraphComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ParagraphComponent.tsx
index 1be525f2072..4219efd8eb4 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ParagraphComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/ParagraphComponent.tsx
@@ -1,16 +1,8 @@
 import * as React from 'react';
 import { Grid, makeStyles, Typography } from '@material-ui/core';
-import { ITextResourceBindings } from 'src/features/form/layout';
 import { HelpTextContainer } from 'src/features/form/components/HelpTextContainer';
-import { ILanguage } from 'altinn-shared/types';
+import { IComponentProps } from '..';
 
-export interface IParagraphProps {
-  id: string;
-  text: string;
-  textResourceBindings: ITextResourceBindings;
-  language: ILanguage;
-  getTextResource: (key: string) => string;
-}
 
 const useStyles = makeStyles({
   spacing: {
@@ -41,7 +33,7 @@ const useStyles = makeStyles({
   },
 });
 
-export function ParagraphComponent(props: IParagraphProps) {
+export function ParagraphComponent(props: IComponentProps) {
   const classes = useStyles();
   return (
     <Grid
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/RadioButtonsContainerComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/RadioButtonsContainerComponent.tsx
index 5753bfdac99..d9c9d805dab 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/RadioButtonsContainerComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/RadioButtonsContainerComponent.tsx
@@ -9,20 +9,14 @@ import { FormLabel } from '@material-ui/core';
 import classNames from 'classnames';
 import { renderValidationMessagesForComponent } from '../../utils/render';
 import { useAppSelector } from 'src/common/hooks';
+import { IComponentProps } from '..';
 
-export interface IRadioButtonsContainerProps {
-  id: string;
-  formData: any;
-  handleDataChange: (value: any) => void;
-  handleFocusUpdate: (value: any) => void;
+export interface IRadioButtonsContainerProps extends IComponentProps {
   validationMessages?: any;
   options: any[];
   optionsId: string;
   preselectedOptionIndex: number;
-  shouldFocus: boolean;
   title: string;
-  legend: () => JSX.Element;
-  getTextResource: (key: string) => string;
 }
 
 const useStyles = makeStyles({
@@ -87,11 +81,11 @@ export const RadioButtonContainerComponent = (
 
   React.useEffect(() => {
     returnSelected();
-  }, [props.formData]);
+  }, [props.formData?.simpleBinding]);
 
   const returnSelected = () => {
     if (
-      !props.formData &&
+      !props.formData?.simpleBinding &&
       props.preselectedOptionIndex >= 0 &&
       options &&
       props.preselectedOptionIndex < options.length
@@ -101,9 +95,7 @@ export const RadioButtonContainerComponent = (
       setSelected(preSelectedValue);
     } else {
       setSelected(
-        props.formData !== undefined && props.formData !== null
-          ? props.formData
-          : '',
+        props.formData?.simpleBinding ?? '',
       );
     }
   };
@@ -115,7 +107,7 @@ export const RadioButtonContainerComponent = (
   };
 
   const handleOnBlur = () => {
-    props.handleDataChange(props.formData);
+    props.handleDataChange(props.formData?.simpleBinding ?? '');
   };
 
   const RenderLegend = props.legend;
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/TextAreaComponent.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/TextAreaComponent.tsx
index 9e3cc005a69..4b2e6ad4865 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/TextAreaComponent.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/TextAreaComponent.tsx
@@ -1,22 +1,17 @@
 import * as React from 'react';
+import { IComponentProps } from '..';
 import '../../styles/shared.css';
 
-export interface ITextAreaComponentProps {
-  id: string;
-  formData: any;
-  handleDataChange: (value: any) => void;
-  isValid?: boolean;
-  readOnly: boolean;
-}
+export function TextAreaComponent(props: IComponentProps) {
+  const formData = props.formData?.simpleBinding;
 
-export function TextAreaComponent(props: ITextAreaComponentProps) {
   const [value, setValue] = React.useState(
-    props.formData ? props.formData : '',
+    formData ?? '',
   );
 
   React.useEffect(() => {
-    setValue(props.formData);
-  }, [props.formData]);
+    setValue(formData);
+  }, [formData]);
 
   const onDataChanged = (e: any) => {
     setValue(e.target.value);
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/index.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/index.ts
index 272da073bc8..c0e71766fe7 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/index.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/index.ts
@@ -15,10 +15,12 @@ import { TextAreaComponent } from './base/TextAreaComponent';
 import { ImageComponent } from './base/ImageComponent';
 import { NavigationButtons as NavigationButtonsComponent } from './presentation/NavigationButtons';
 import { InstantiationButtonComponent } from './base/InstantiationButtonComponent';
+import { IGenericComponentProps } from './GenericComponent';
+import { IComponentFormData } from 'src/utils/formComponentUtils';
 
 export interface IComponent {
   name: string;
-  Tag: any;
+  Tag: (props: IComponentProps) => JSX.Element;
   Type: ComponentTypes;
   customProperties?: any;
 }
@@ -158,6 +160,20 @@ export const advancedComponents: IComponent[] = [
   },
 ];
 
+export interface  IComponentProps extends IGenericComponentProps {
+  handleDataChange: (value: string, key?: string) => void,
+  handleFocusUpdate: (componentId: string, step?: number) => void,
+  getTextResource: (key: string) => React.ReactNode,
+  getTextResourceAsString: (key: string) => string,
+  formData: IComponentFormData,
+  isValid: boolean,
+  language: any,
+  shouldFocus: boolean,
+  text: React.ReactNode,
+  label: () => JSX.Element,
+  legend: () => JSX.Element,
+};
+
 const components: IComponent[] = textComponents.concat(schemaComponents, advancedComponents);
 
 export default components;
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/presentation/NavigationButtons.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/presentation/NavigationButtons.tsx
index d042ad3e9a1..abbd2e76936 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/presentation/NavigationButtons.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/components/presentation/NavigationButtons.tsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { getTextFromAppOrDefault } from 'src/utils/textResource';
 import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
 import { useAppDispatch, useAppSelector } from 'src/common/hooks';
+import { IComponentProps } from '..';
 
 const useStyles = makeStyles({
   backButton: {
@@ -15,11 +16,8 @@ const useStyles = makeStyles({
   },
 });
 
-export interface INavigationButtons {
-  id: string;
+export interface INavigationButtons extends IComponentProps {
   showBackButton: boolean;
-  textResourceBindings: any;
-  triggers?: Triggers[];
 }
 
 export function NavigationButtons(props: INavigationButtons) {
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/Description.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/Description.tsx
index 955c91433a0..b8ccf19411a 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/Description.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/Description.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface IDescriptionProps {
-  description: string;
+  description: React.ReactNode;
   id: string;
 }
 
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/HelpTextContainer.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/HelpTextContainer.tsx
index b079a8c565d..b7a49ee1c22 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/HelpTextContainer.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/HelpTextContainer.tsx
@@ -6,7 +6,7 @@ import { ILanguage } from 'altinn-shared/types';
 export interface IHelpTextContainerProps {
   language: ILanguage;
   id: string;
-  helpText: string;
+  helpText: React.ReactNode;
 }
 
 export function HelpTextContainer(props: IHelpTextContainerProps) {
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/HelpTextPopover.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/HelpTextPopover.tsx
index a9d8c654fd4..b0ff89de204 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/HelpTextPopover.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/HelpTextPopover.tsx
@@ -29,7 +29,7 @@ const transformOrigin = {
 export interface IHelpTextPopoverProps {
   helpIconRef: React.RefObject<any>;
   openPopover: boolean;
-  helpText: string;
+  helpText: React.ReactNode;
   language: ILanguage;
   id: string;
   closePopover: () => void;
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/Legend.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/Legend.tsx
index e53ee0e7ba5..1c6b6350e88 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/Legend.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/components/Legend.tsx
@@ -7,12 +7,12 @@ import { HelpTextContainer } from './HelpTextContainer';
 import { ILanguage } from 'altinn-shared/types';
 
 export interface IFormLegendProps {
-  labelText: string;
-  descriptionText: string;
+  labelText: React.ReactNode;
+  descriptionText: React.ReactNode;
   language: ILanguage;
   required?: boolean;
   labelSettings?: ILabelSettings;
-  helpText: string;
+  helpText: React.ReactNode;
   id: string;
 }
 
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/containers/RepeatingGroupTable.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/containers/RepeatingGroupTable.tsx
index 2560f5fcbc3..12a9b8c8fef 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/containers/RepeatingGroupTable.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/containers/RepeatingGroupTable.tsx
@@ -285,6 +285,7 @@ export function RepeatingGroupTable({
                     (component as any).baseComponentId || component.id;
                   if (tableHeaderComponents.includes(childId)) {
                     items.push({
+                      key: component.id,
                       label: getTextResource(
                         component?.textResourceBindings?.title,
                         textResources,
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/data/formDataReducer.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/data/formDataReducer.ts
index 038be314989..4e512185cdc 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/data/formDataReducer.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/data/formDataReducer.ts
@@ -9,7 +9,7 @@ import { IFetchFormDataFulfilled,
   IUpdateFormDataFulfilled } from './formDataTypes';
 
 export interface IFormData {
-  [dataFieldKey: string]: any;
+  [dataFieldKey: string]: string;
 }
 
 export interface IFormDataState {
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/layout/index.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/layout/index.ts
index b301a2a26c6..6f2c41b38c6 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/layout/index.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/layout/index.ts
@@ -1,5 +1,5 @@
 import { GridSize } from '@material-ui/core';
-import { IMapping, IOption, Triggers } from '../../../types';
+import { IOption, Triggers } from '../../../types';
 
 export interface ILayouts {
   [id: string]: ILayout;
@@ -66,16 +66,6 @@ export interface ISelectionComponentProps extends ILayoutComponent {
   optionsId?: string;
 }
 
-export type IDatepickerProps = ILayoutComponent;
-
-export interface IFileuploadProps extends ILayoutComponent {
-  maxNumberOfAttachments: number;
-  maxFileSizeInMB: number;
-  displayMode: any;
-  hasCustomFileEndings: boolean;
-  validFileEndings: any;
-}
-
 export interface IGrid extends IGridStyling {
   labelGrid?: IGridStyling;
   innerGrid?: IGridStyling;
@@ -89,52 +79,6 @@ export interface IGridStyling {
   xl?: GridSize;
 }
 
-declare enum HeaderSize {
-  S,
-  M,
-  L,
-}
-
-export interface IHeaderProps extends ILayoutComponent {
-  size: HeaderSize;
-}
-
-declare enum InputFieldType {
-  text,
-  email,
-  password,
-}
-
-export interface IInputProps extends ILayoutComponent {
-  inputType: InputFieldType;
-}
-
-export interface INavigationButtonProps extends ILayoutComponent {
-  next?: string;
-  previous?: string;
-}
-
-export interface IInstantiationButtonProps extends ILayoutComponent {
-  mapping: IMapping;
-  text: string;
-}
-
-export type IParagraphProps = ILayoutComponent;
-
-export interface IRadioButtonsProps extends ILayoutComponent {
-  options: IOption[];
-  preselectedOptionIndex: number;
-}
-
-export type ITextAreaProps = ILayoutComponent;
-
-export interface IAdressComponent extends ILayoutComponent {
-  addressTextResourceBinding: string;
-  areaCodeTextResourceBinding: string;
-  coTextResourceBinding: string;
-  simpleDisplayMode: boolean;
-}
-
 export interface IGroupEditProperties {
   mode?: 'hideTable' | 'showTable' | 'showAll';
   filter?: IGroupFilter[];
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/rules/check/checkRulesSagas.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/rules/check/checkRulesSagas.ts
index 1f91e6d17f5..2931d09d946 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/rules/check/checkRulesSagas.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/form/rules/check/checkRulesSagas.ts
@@ -3,14 +3,14 @@ import { all, call, put, select, takeLatest } from 'redux-saga/effects';
 import { IRuntimeState } from '../../../../types';
 import { checkIfRuleShouldRun } from '../../../../utils/rules';
 import FormDataActions from '../../data/formDataActions';
-import { IFormData } from '../../data/formDataReducer';
+import { IFormDataState } from '../../data/formDataReducer';
 import { IRuleConnections } from '../../dynamics';
 import { ILayoutState } from '../../layout/formLayoutSlice';
 import * as RuleActions from './checkRulesActions';
 import * as ActionTypes from '../rulesActionTypes';
 
 const selectRuleConnection = (state: IRuntimeState): IRuleConnections => state.formDynamics.ruleConnection;
-const selectFormDataConnection = (state: IRuntimeState): IFormData => state.formData;
+const selectFormDataConnection = (state: IRuntimeState): IFormDataState => state.formData;
 const selectFormLayoutConnection = (state: IRuntimeState): ILayoutState => state.formLayout;
 
 export interface IResponse {
@@ -25,7 +25,7 @@ function* checkIfRuleShouldRunSaga({
 }: RuleActions.ICheckIfRuleShouldRun): SagaIterator {
   try {
     const ruleConnectionState: IRuleConnections = yield select(selectRuleConnection);
-    const formDataState: IFormData = yield select(selectFormDataConnection);
+    const formDataState: IFormDataState = yield select(selectFormDataConnection);
     const formLayoutState: ILayoutState = yield select(selectFormLayoutConnection);
 
     // const currentLayout = formLayoutState.layouts[formLayoutState.uiConfig.currentView];
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/instantiate/containers/InstanceSelection.tsx b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/instantiate/containers/InstanceSelection.tsx
index d95281493fa..6e455e6558f 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/instantiate/containers/InstanceSelection.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/features/instantiate/containers/InstanceSelection.tsx
@@ -82,6 +82,7 @@ export default function InstanceSelection({
               <AltinnMobileTableItem
                 items={[
                   {
+                    key: 1,
                     label: getLanguageFromKey(
                       'instance_selection.last_changed',
                       language,
@@ -89,6 +90,7 @@ export default function InstanceSelection({
                     value: getDateDisplayString(instance.lastChanged),
                   },
                   {
+                    key: 2,
                     label: getLanguageFromKey(
                       'instance_selection.changed_by',
                       language,
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/formComponentUtils.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/formComponentUtils.ts
index 5492e15c110..c0b716d0e3c 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/formComponentUtils.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/formComponentUtils.ts
@@ -4,6 +4,8 @@ import {
   getParsedLanguageFromText,
   getTextResourceByKey,
 } from 'altinn-shared/utils';
+import React from 'react';
+import { IFormData } from 'src/features/form/data/formDataReducer';
 import {
   ILayoutComponent,
   ILayoutGroup,
@@ -19,7 +21,7 @@ import {
   IValidations,
 } from 'src/types';
 
-export const isSimpleComponent = (
+export const componentValidationsHandledByGenericComponent = (
   dataModelBindings: any,
   type: string,
 ): boolean => {
@@ -58,20 +60,20 @@ export const getComponentValidations = (
   return undefined;
 };
 
+export interface IComponentFormData {
+  simpleBinding?: string;
+  [binding: string]: string;
+}
+
 export const getFormDataForComponent = (
-  formData: any,
+  formData: IFormData,
   dataModelBindings: IDataModelBindings,
 ) => {
   if (!dataModelBindings) {
-    return '';
+    return {} as IComponentFormData;
   }
 
-  if (dataModelBindings.simpleBinding) {
-    const formDataVal = formData[dataModelBindings.simpleBinding];
-    return formDataVal;
-  }
-
-  const formDataObj = {};
+  const formDataObj:IComponentFormData = {};
   Object.keys(dataModelBindings).forEach((key: any) => {
     const binding = dataModelBindings[key];
     if (formData[binding]) {
@@ -242,7 +244,7 @@ export const isComponentValid = (
 export const getTextResource = (
   resourceKey: string,
   textResources: ITextResource[],
-): any => {
+): React.ReactNode => {
   const textResource = textResources.find(
     (resource: ITextResource) => resource.id === resourceKey,
   );
@@ -255,7 +257,7 @@ export function selectComponentTexts(
   textResources: ITextResource[],
   textResourceBindings: ITextResourceBindings,
 ) {
-  const result: any = {};
+  const result: {[textResourceKey: string]: React.ReactNode} = {};
 
   Object.keys(textResourceBindings).forEach((key) => {
     result[key] = getTextResource(textResourceBindings[key], textResources);
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/formLayout.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/formLayout.ts
index b9593c894b4..52fb35aeeac 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/formLayout.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/formLayout.ts
@@ -1,4 +1,5 @@
 import { ITextResource } from 'altinn-shared/types';
+import { IInstantiationButtonProps } from 'src/components/base/InstantiationButtonComponent';
 import {
   IRepeatingGroups,
   ILayoutNavigation,
@@ -6,7 +7,6 @@ import {
   IMapping,
 } from 'src/types';
 import {
-  IInstantiationButtonProps,
   ILayout,
   ILayoutComponent,
   ILayoutGroup,
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/rules/index.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/rules/index.ts
index d909eabf810..c0a4d5e2439 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/rules/index.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/rules/index.ts
@@ -1,11 +1,11 @@
-import { IFormData } from '../../features/form/data/formDataReducer';
+import { IFormDataState } from '../../features/form/data/formDataReducer';
 import { IRuleConnections } from '../../features/form/dynamics';
 import { ILayouts, ILayoutComponent } from '../../features/form/layout';
 import { IRuleModelFieldElement } from '../../features/form/rules';
 
 export function checkIfRuleShouldRun(
   ruleConnectionState: IRuleConnections,
-  formDataState: IFormData,
+  formDataState: Partial<IFormDataState>,
   layouts: ILayouts,
   lastUpdatedDataBinding: string,
 ) {
diff --git a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/validation.ts b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/validation.ts
index 7612913c1ce..bf8d77b1d83 100644
--- a/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/validation.ts
+++ b/src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/src/utils/validation.ts
@@ -465,7 +465,7 @@ export function validateFormComponentsForLayout(
         const flagBasedMaxDate =
           getFlagBasedDate(component.maxDate as DateFlags) ?? component.maxDate;
         const datepickerValidations = validateDatepickerFormData(
-          date,
+          date?.simpleBinding,
           flagBasedMinDate,
           flagBasedMaxDate,
           component.format,
diff --git a/src/Altinn.Apps/AppFrontend/react/shared/src/components/molecules/AltinnMobileTableItem.tsx b/src/Altinn.Apps/AppFrontend/react/shared/src/components/molecules/AltinnMobileTableItem.tsx
index 7cba0649bb2..dddb06506e4 100644
--- a/src/Altinn.Apps/AppFrontend/react/shared/src/components/molecules/AltinnMobileTableItem.tsx
+++ b/src/Altinn.Apps/AppFrontend/react/shared/src/components/molecules/AltinnMobileTableItem.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import theme from '../../theme/altinnStudioTheme';
 
 export interface IMobileTableItem {
-  label: string;
+  key: React.Key;
+  label: React.ReactNode;
   value: string;
 }
 
@@ -73,7 +74,7 @@ export default function AltinnMobileTableItem({
         <TableBody>
           {items.map((item) => {
             return (
-              <TableRow key={item.label}>
+              <TableRow key={item.key}>
                 <TableCell variant='head' width='40%'>
                   <Typography variant='body1' className={`${classes.labelText} ${classes.textContainer}`}>
                     {item.label}