Repository: AmruthPillai/Reactive-Resume
File: apps/client/src/pages/builder/sidebars/left/dialogs/profiles.tsx (TypeScript)

Code before:
              <FormLabel>{t`Website`}</FormLabel>
              <FormControl>
                <URLInput {...field} placeholder="https://linkedin.com/in/johndoe" />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="icon"
          control={form.control}
          render={({ field }) => (
            <FormItem className="sm:col-span-2">
              <FormLabel htmlFor="iconSlug">{t`Icon`}</FormLabel>
              <FormControl>
                <div className="flex items-center gap-x-2">
                  <Avatar className="size-8 bg-white">
                    {iconSrc && (
                      <AvatarImage
                        className="p-1.5"
                        src={iconSrc}
                      />
                    )}
                  </Avatar>
                  <Input {...field} id="iconSlug" placeholder="linkedin" onChange={(e) => handleIconChange(e, field)} />
                </div>
              </FormControl>
              <FormMessage />
              <FormDescription className="ml-10">
                <Trans>
                  Powered by{" "}
                  <a
                    href="https://simpleicons.org/"
                    target="_blank"
                    rel="noopener noreferrer nofollow"
                    className="font-medium"
                  >
                    Simple Icons
                  </a>
                </Trans>
              </FormDescription>
            </FormItem>
          )}
        />
      </div>
    </SectionDialog>
  );
};


Review comment (suggestion):
Personally, if the only reason to pass `field` to the `handleIconChange` function is to call `field.onChange(event)`, you could just create an anonymous function inline to call it separately. So it would look something like this:

```suggestion
                  <Input {...field} id="iconSlug" placeholder="linkedin" onChange={(event) => {
                    field.onChange(event);
                    handleIconChange(event);
                  }} />
```

This way, you don't need to pass the field (and it's complex types) to the function.

Code after:
          control={form.control}
          render={({ field }) => (
            <FormItem className="sm:col-span-2">
              <FormLabel htmlFor="iconSlug">{t`Icon`}</FormLabel>
              <FormControl>
                <div className="flex items-center gap-x-2">
                  <Avatar className="size-8 bg-white">
                    {iconSrc && (
                      <AvatarImage
                        className="p-1.5"
                        src={iconSrc}
                      />
                    )}
                  </Avatar>
                  <Input {...field} id="iconSlug" placeholder="linkedin" onChange={(event) => {
                    field.onChange(event)
                    handleIconChange(event)
                  }} />
                </div>
              </FormControl>
              <FormMessage />
              <FormDescription className="ml-10">
                <Trans>
                  Powered by{" "}
                  <a
                    href="https://simpleicons.org/"
                    target="_blank"
                    rel="noopener noreferrer nofollow"
                    className="font-medium"
                  >
                    Simple Icons
                  </a>
                </Trans>
              </FormDescription>
            </FormItem>
          )}
        />
      </div>
    </SectionDialog>
  );
};