+
Oops, something went wrong :(
+
The error: {this.state.error.toString()}
+
Where it occurred: {this.state.info.componentStack}
+
+ );
+ }
+ return this.props.children;
+ }
+}
+export default ErrorBoundary;
diff --git a/samples/react-faqapp/src/webparts/reactFaq/components/IReactFaqProps.ts b/samples/react-faqapp/src/webparts/reactFaq/components/IReactFaqProps.ts
new file mode 100644
index 000000000..b019da0c9
--- /dev/null
+++ b/samples/react-faqapp/src/webparts/reactFaq/components/IReactFaqProps.ts
@@ -0,0 +1,5 @@
+import { ServiceScope } from '@microsoft/sp-core-library';
+export interface IReactFaqProps {
+ listName: string;
+ ServiceScope: ServiceScope;
+}
diff --git a/samples/react-faqapp/src/webparts/reactFaq/components/ReactFaq.module.scss b/samples/react-faqapp/src/webparts/reactFaq/components/ReactFaq.module.scss
new file mode 100644
index 000000000..e9f3eca33
--- /dev/null
+++ b/samples/react-faqapp/src/webparts/reactFaq/components/ReactFaq.module.scss
@@ -0,0 +1,74 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+
+.reactFaq {
+ .container {
+ max-width: 700px;
+ margin: 0px auto;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+ }
+
+ .row {
+ @include ms-Grid-row;
+ @include ms-fontColor-white;
+ background-color: $ms-color-themeDark;
+ padding: 20px;
+ }
+
+ .column {
+ @include ms-Grid-col;
+ @include ms-lg10;
+ @include ms-xl8;
+ @include ms-xlPush2;
+ @include ms-lgPush1;
+ }
+
+ .title {
+ @include ms-font-xl;
+ @include ms-fontColor-white;
+ }
+
+ .subTitle {
+ @include ms-font-l;
+ @include ms-fontColor-white;
+ }
+
+ .description {
+ @include ms-font-l;
+ @include ms-fontColor-white;
+ }
+
+ .button {
+ // Our button
+ text-decoration: none;
+ height: 32px;
+
+ // Primary Button
+ min-width: 80px;
+ background-color: $ms-color-themePrimary;
+ border-color: $ms-color-themePrimary;
+ color: $ms-color-white;
+
+ // Basic Button
+ outline: transparent;
+ position: relative;
+ font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ border-width: 0;
+ text-align: center;
+ cursor: pointer;
+ display: inline-block;
+ padding: 0 16px;
+
+ .label {
+ font-weight: $ms-font-weight-semibold;
+ font-size: $ms-font-size-m;
+ height: 32px;
+ line-height: 32px;
+ margin: 0 4px;
+ vertical-align: top;
+ display: inline-block;
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/react-faqapp/src/webparts/reactFaq/components/ReactFaq.tsx b/samples/react-faqapp/src/webparts/reactFaq/components/ReactFaq.tsx
new file mode 100644
index 000000000..909759095
--- /dev/null
+++ b/samples/react-faqapp/src/webparts/reactFaq/components/ReactFaq.tsx
@@ -0,0 +1,633 @@
+import * as React from 'react';
+import { IReactFaqProps } from './IReactFaqProps';
+import { IFaqProp, IFaqServices } from '../../../interface';
+import { ServiceScope, ServiceKey, Environment, EnvironmentType } from '@microsoft/sp-core-library';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as fontawesome from '@fortawesome/free-solid-svg-icons';
+import Autosuggest from 'react-autosuggest';
+import { FaqServices } from '../../../services/FaqServices';
+import ReactHtmlParser from 'react-html-parser';
+import './reactAccordion.css';
+
+
+import {
+ Accordion,
+ AccordionItem,
+ AccordionItemHeading,
+ AccordionItemButton,
+ AccordionItemPanel,
+} from 'react-accessible-accordion';
+
+
+import './index.css';
+import ErrorBoundary from './ErrorBoundary';
+
+
+
+export interface IFaqState {
+
+ originalData: IFaqProp[];
+ actualData: IFaqProp[];
+ BusinessCategory: any;
+ isLoading: Boolean;
+ errorCause: String;
+ selectedEntity: any;
+ show: Boolean;
+ filterData: any;
+ searchValue: String;
+ filteredCategoryData: any;
+ filteredQuestion: String;
+ value: String;
+ suggestions: any;
+ actualCanvasContentHeight: number;
+ actualCanvasWrapperHeight: number;
+ actualAccordionHeight: number;
+}
+
+
+export default class ReactFaq extends React.Component