fix: remove usage of reserved "key" prop

Author: abelflopes

packages/components/form/src/Form.tsx

@@ -49,9 +49,9 @@ export const Form = <T extends FormFieldMap>({
   useEffect(() => {
     const tmpFieldElements: React.ReactNode[] = [];
 
-    for (const key in fields) {
-      if (fields[key] !== undefined) {
-        const item = fields[key];
+    for (const fieldKey in fields) {
+      if (fields[fieldKey] !== undefined) {
+        const item = fields[fieldKey];
 
         if (item === undefined) continue;
 
@@ -64,14 +64,14 @@ export const Form = <T extends FormFieldMap>({
           );
         }
 
-        const value = internalValues.values[key];
+        const value = internalValues.values[fieldKey];
 
         const adapterProps = {
-          key,
+          fieldKey,
           value,
-          isTouched: Boolean(isTouched[key]),
-          valid: Boolean(validity.fields[key]?.valid),
-          error: validity.fields[key]?.error,
+          isTouched: Boolean(isTouched[fieldKey]),
+          valid: Boolean(validity.fields[fieldKey]?.valid),
+          error: validity.fields[fieldKey]?.error,
           setInternalValues,
         };
 

packages/components/form/src/adapters/Input.tsx

@@ -4,15 +4,14 @@ import { Input } from "@react-ck/input";
 
 export const InputAdapter = <K extends string, T extends FormFieldMap, KT extends keyof T>({
   value,
-  key,
+  fieldKey,
   props,
   isTouched,
   valid,
   error,
   setInternalValues,
 }: Readonly<InputAdapterProps<"input", K, T, KT>>): React.ReactElement => (
   <Input
-    key={key}
     {...props}
     value={typeof value === "string" ? value : ""}
     skin={isTouched && !valid ? "negative" : "default"}
@@ -21,10 +20,10 @@ export const InputAdapter = <K extends string, T extends FormFieldMap, KT extend
       setInternalValues((v) => ({
         values: {
           ...v.values,
-          [key]: e.target.value.length > 0 ? e.target.value : null,
+          [fieldKey]: e.target.value.length > 0 ? e.target.value : null,
         },
         changeType: "user",
-        changedField: key,
+        changedField: fieldKey,
       }));
       props.onChange?.(e);
     }}

packages/components/form/src/adapters/Select.tsx

@@ -4,15 +4,15 @@ import { Select } from "@react-ck/select";
 
 export const SelectAdapter = <K extends string, T extends FormFieldMap, KT extends keyof T>({
   value,
-  key,
+  fieldKey,
   props,
   isTouched,
   valid,
   error,
   setInternalValues,
 }: Readonly<InputAdapterProps<"select", K, T, KT>>): React.ReactElement => (
   <Select
-    key={key}
+    key={fieldKey}
     {...props}
     value={typeof value === "string" ? value : ""}
     skin={isTouched && !valid ? "negative" : "default"}
@@ -21,10 +21,10 @@ export const SelectAdapter = <K extends string, T extends FormFieldMap, KT exten
       setInternalValues((v) => ({
         values: {
           ...v.values,
-          [key]: e.currentTarget.value.length > 0 ? e.currentTarget.value : null,
+          [fieldKey]: e.currentTarget.value.length > 0 ? e.currentTarget.value : null,
         },
         changeType: "user",
-        changedField: key,
+        changedField: fieldKey,
       }));
       props.onChange?.(e);
     }}

packages/components/form/src/adapters/Textarea.tsx

@@ -4,15 +4,14 @@ import { Textarea } from "@react-ck/textarea";
 
 export const TextareaAdapter = <K extends string, T extends FormFieldMap, KT extends keyof T>({
   value,
-  key,
+  fieldKey,
   props,
   isTouched,
   valid,
   error,
   setInternalValues,
 }: Readonly<InputAdapterProps<"textarea", K, T, KT>>): React.ReactElement => (
   <Textarea
-    key={key}
     {...props}
     value={typeof value === "string" ? value : ""}
     skin={isTouched && !valid ? "negative" : "default"}
@@ -21,10 +20,10 @@ export const TextareaAdapter = <K extends string, T extends FormFieldMap, KT ext
       setInternalValues((v) => ({
         values: {
           ...v.values,
-          [key]: e.currentTarget.value.length > 0 ? e.currentTarget.value : null,
+          [fieldKey]: e.currentTarget.value.length > 0 ? e.currentTarget.value : null,
         },
         changeType: "user",
-        changedField: key,
+        changedField: fieldKey,
       }));
       props.onChange?.(e);
     }}

packages/components/form/src/types.ts

@@ -65,7 +65,7 @@ export type InputAdapterProps<
   T extends FormFieldMap,
   KT extends keyof T,
 > = FieldListMap[F] & {
-  key: K;
+  fieldKey: K;
   value: FormValues<T>[KT];
   isTouched: boolean;
   valid: boolean;