fixed useStateModal's component buttons to refresh the modal view to topmost component state when clicked. code preview keystring is also refreshed with this click now.

co-authored-by: Crys Lim [email protected]

Author: chrisjtang

app/src/components/bottom/UseStateModal.tsx

@@ -14,7 +14,14 @@ function UseStateModal({ updateAttributeWithState, attributeToChange, childId })
   const [componentProviderId, setComponentProviderId] = useState(1) // for now set to App
   const components = [];
   for (let i = 0; i < state.components.length; i ++) {
-    components.push(<button onClick={() => setComponentProviderId(i+1)}>{state.components[i].name}</button>)
+    components.push(<button 
+      onClick={() => {
+        setComponentProviderId(i+1);
+        setDisplayObject(null);
+        setStateKey('');
+      }}>
+        {state.components[i].name}
+      </button>)
   }
 
   // return the selected state's ID back so the value of it can be updated in the customizationpanel.  to the assign the value of selected state to attribute tied to useState button (currently just text)

app/src/helperFunctions/generateCode.ts

@@ -126,7 +126,7 @@ const generateUnformattedCode = (
   const elementGenerator = (childElement: object, level: number = 2) => {
     let innerText = '';
     let activeLink = '';
-    
+
     if (childElement.attributes && childElement.attributes.compText) {
       if (childElement.stateUsed && childElement.stateUsed.compText) {
         innerText = '{' + childElement.stateUsed.compText + '}';