Co-authored-by: BenCauffman <[email protected]>

Co-authored-by: Darin <[email protected]>
Co-authored-by: Thomas Lukasiewicz <[email protected]>
Co-authored-by: Ahsan Rao <[email protected]>

Author: carlyjackson

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -43,6 +43,8 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
   const [parentName, setParentName] = useState('No Parents');
   const [parentComponent, setParentComponent] = useState({});
   const [rows1, setRows1] = useState(currentComponent.stateProps);
+  const [propNum, setPropNum] = useState(1);
+
   // convert value to correct type based on user input
   const typeConversion = (value, type) => {
     switch (type) {
@@ -108,10 +110,11 @@ const StatePropsPanel = ({ isThemeLight, data}): JSX.Element => {
           }
           }
         }
-
+    setPropNum(prev => prev + 1);
     const newState = {
       // check if array is not empty => true find last elem in array. get id and increment by 1 || else 1
-      id: statesArray.length > 0 ? statesArray[statesArray.length-1].id + 1 : 1,
+      // id: statesArray.length > 0 ? statesArray[statesArray.length-1].id + 1 : 1,
+      id: `${currentComponent.name}-${propNum}`,
       key: inputKey,
       value: typeConversion(inputValue, inputType),
       type: inputType,

app/src/reducers/componentReducer.ts

@@ -776,6 +776,15 @@ const reducer = (state: State, action: Action) => {
         // need to change this to match the id from the tree
         state.canvasFocus.componentId
       ); 
+      // do a check if prop already exists in passed in props
+      for (let i = 0; i < currComponent.passedInProps.length; i++) {
+        let curr = currComponent.passedInProps[i];
+        console.log('inside for loop curr', curr)
+        console.log('inside for loop action.payload.passedInProps', action.payload.passedInProps)
+        if (curr.id === action.payload.passedInProps.id) {
+          return { ...state, components};
+        }
+      }
       currComponent.passedInProps.push(action.payload.passedInProps);
       console.log('in reducer', currComponent)
       //currComponent.useStateCodes = updateUseStateCodes(currComponent);