From d1037bc838d1ddc6c4277b20829f4864eb032ca2 Mon Sep 17 00:00:00 2001
From: Andreas Omayrat <andreasomayrat@hotmail.com>
Date: Mon, 3 Apr 2023 10:57:23 +0200
Subject: [PATCH 1/2] Changed react import to fix "cannot be used as a JSX
 component" error

---
 src/controls/fieldPicker/FieldPicker.tsx             |  2 +-
 .../controlsTest/components/ControlsTest.tsx         | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/controls/fieldPicker/FieldPicker.tsx b/src/controls/fieldPicker/FieldPicker.tsx
index 976d2c501..384da446d 100644
--- a/src/controls/fieldPicker/FieldPicker.tsx
+++ b/src/controls/fieldPicker/FieldPicker.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import { Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index d23d5184a..db4ff7b3a 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -192,6 +192,7 @@ import { ModernAudio, ModernAudioLabelPosition } from "../../../ModernAudio";
 import { SPTaxonomyService, TaxonomyTree } from "../../../ModernTaxonomyPicker";
 import { TestControl } from "./TestControl";
 import { UploadFiles } from "../../../controls/uploadFiles";
+import { FieldPicker } from "../../../FieldPicker";
 
 // Used to render document card
 /**
@@ -2429,6 +2430,17 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           </EnhancedThemeProvider>
         </div>
 
+        <div>
+          <h3>Field Picker</h3>
+          <FieldPicker 
+            context={this.props.context}
+            label={'Select a field'}
+            listId={'07890a2b-10f1-47dd-a899-cc60ca461d51'}
+            onSelectionChanged={(fields) => {              
+              console.log(fields);
+            }}
+          />
+        </div>
       </div>
     );
   }

From f2984e72bb30781f446f7061cf0bda9826ee3afb Mon Sep 17 00:00:00 2001
From: Andreas Omayrat <andreasomayrat@hotmail.com>
Date: Tue, 11 Apr 2023 14:06:27 +0200
Subject: [PATCH 2/2] Change FieldPicker to use list from ListPicker

---
 .../controlsTest/components/ControlsTest.tsx  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index db4ff7b3a..5d996721f 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -1516,6 +1516,18 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
                   onSelectedItem={this.listItemPickerDataSelected} />
 
               </div>
+
+              <div className="ms-font-m">Field picker tester:
+                <FieldPicker 
+                  context={this.props.context}
+                  label={'Select a field'}
+                  listId={this.state.selectedList}
+                  onSelectionChanged={(fields) => {              
+                    console.log(fields);
+                  }}
+                />
+              </div>
+
               <div>Icon Picker</div>
               <div>
                 <IconPicker
@@ -2429,18 +2441,6 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             </Stack>
           </EnhancedThemeProvider>
         </div>
-
-        <div>
-          <h3>Field Picker</h3>
-          <FieldPicker 
-            context={this.props.context}
-            label={'Select a field'}
-            listId={'07890a2b-10f1-47dd-a899-cc60ca461d51'}
-            onSelectionChanged={(fields) => {              
-              console.log(fields);
-            }}
-          />
-        </div>
       </div>
     );
   }