Fix typos

Author: akshay5995

src/docs/MultiplePageDemo/index.jsx

@@ -13,15 +13,15 @@ const { Content } = Layout;
 const { TabPane } = Tabs;
 const { Text } = Typography;
 
-const initalReportProps = {
+const initialReportProps = {
   tokenType: 'Embed',
 };
 
 const ReportDemo = () => {
   const [reportProps, setReportProps] = React.useState(
-    initalReportProps
+    initialReportProps
   );
-  const [isVaildConfig, setIsValidConfig] = React.useState(false);
+  const [isValidConfig, setIsValidConfig] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState('form');
 
   const onTabClick = (key, event) => setActiveTab(key);
@@ -76,7 +76,7 @@ const ReportDemo = () => {
 
   const onReset = React.useCallback(() => {
     setIsValidConfig(false);
-  }, [isVaildConfig]);
+  }, [isValidConfig]);
 
   const extraSettings = {
     filterPaneEnabled: false,
@@ -118,7 +118,7 @@ const ReportDemo = () => {
             key="form"
           >
             <Form
-              initalReportProps={initalReportProps}
+              initialReportProps={initialReportProps}
               onSubmit={renderWithReportProps}
               onReset={onReset}
             />
@@ -151,9 +151,9 @@ const ReportDemo = () => {
             </Info>
           </TabPane>
           <TabPane
-            disabled={!isVaildConfig}
+            disabled={!isValidConfig}
             tab={
-              <Badge dot={isVaildConfig}>
+              <Badge dot={isValidConfig}>
                 <span>
                   <CheckCircleTwoTone twoToneColor="#52c41a" />
                   Report
@@ -212,7 +212,7 @@ const ReportDemo = () => {
               </div>
             </div>
             <div style={{ display: 'flex', height: '100%' }}>
-              {isVaildConfig && (
+              {isValidConfig && (
                 <Report
                   style={{
                     height: '100%',
@@ -234,7 +234,7 @@ const ReportDemo = () => {
                   }}
                 />
               )}
-              {isVaildConfig && (
+              {isValidConfig && (
                 <Report
                   style={{
                     height: '100%',

src/docs/Report/index.jsx

@@ -7,15 +7,15 @@ import Form from './Form';
 const { Content } = Layout;
 const { TabPane } = Tabs;
 
-const initalReportProps = {
+const initialReportProps = {
   tokenType: 'Embed',
 };
 
 const ReportDemo = () => {
   const [reportProps, setReportProps] = React.useState(
-    initalReportProps
+    initialReportProps
   );
-  const [isVaildConfig, setIsValidConfig] = React.useState(false);
+  const [isValidConfig, setIsValidConfig] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState('form');
 
   const onTabClick = (key, event) => setActiveTab(key);
@@ -30,7 +30,7 @@ const ReportDemo = () => {
 
   const onReset = React.useCallback(() => {
     setIsValidConfig(false);
-  }, [isVaildConfig]);
+  }, [isValidConfig]);
 
   const extraSettings = {
     filterPaneEnabled: false,
@@ -50,15 +50,15 @@ const ReportDemo = () => {
           key="form"
         >
           <Form
-            initalReportProps={initalReportProps}
+            initialReportProps={initialReportProps}
             onSubmit={renderWithReportProps}
             onReset={onReset}
           />
         </TabPane>
         <TabPane
-          disabled={!isVaildConfig}
+          disabled={!isValidConfig}
           tab={
-            <Badge dot={isVaildConfig}>
+            <Badge dot={isValidConfig}>
               <span>
                 <CheckCircleTwoTone twoToneColor="#52c41a" />
                 Report
@@ -67,7 +67,7 @@ const ReportDemo = () => {
           }
           key="report"
         >
-          {isVaildConfig && (
+          {isValidConfig && (
             <Report
               style={{
                 height: '100%',