how to create react tags fields using react hooks form

[mernaff18]

how to create react tags fields using react hooks form

[bluebill1049]

can you share a codesandobx?

[mernaff18]

https://codesandbox.io/s/competent-snyder-1c1is6

[Moshyfawn]

From what I can find online, what you call "react tags" is basically a MUI Autocomplete, so it should be pretty straight forward using Controller / useController

[mernaff18]

https://codesandbox.io/s/hungry-frog-171imx

i am using react tag input

[Moshyfawn]

You might've forgotten to save your codesanbox as it's currently empty ;)

[mernaff18]

https://codesandbox.io/s/competent-snyder-1c1is6

plz try it

[KayahanKahriman]

This doesnt work.

[abdullah-txfusion]

I had to do this as well and here's what I ended up doing. I'm using react-hook-forms useFieldArray, tailwindcss, daisyui and tremor in this code.

  return (
      <>
        {fields.map(
          (item, index) =>
            index == fields.length - 1 && (
              <div className="flex w-full items-start gap-5">
                <div
                  className="form-control flex w-full flex-row gap-1"
                  key={item.id}
                >
                  <input
                    type="text"
                    placeholder={placeholderMessage}
                    className="w-full appearance-none rounded-lg border-2 border-gray-800 bg-gray-900 px-4 py-2 leading-tight text-gray-200 placeholder:text-gray-500 focus:border-blue-600/50 focus:outline-none"
                    {...register(`${typeToName(type)}.${index}.address`, {
                      required: fields.length === 1,
                    })}
                  />

                  <div
                    className="tooltip tooltip-info my-2"
                    data-tip={tooltipMessage}
                  >
                    <InformationCircleIcon
                      width={24}
                      height={24}
                      className="text-blue_3"
                    />
                  </div>
                </div>

                <AddButton
                  type={type}
                  contractItems={contractItems}
                  userItems={userItems}
                  functionItems={functionItems}
                  append={append}
                />
              </div>
            ),
        )}

        {fields.length > 1 && (
          <div className="flex w-full flex-wrap gap-2">
            {fields.map(
              (item, index) =>
                index <= fields.length - 2 && (
                  <Badge
                    icon={XCircleIcon}
                    size="lg"
                    className="hover:cursor-pointer"
                    onClick={() => remove(index)}
                    key={item.id}
                  >
                    {userItems[index]?.address}
                  </Badge>
                ),
            )}
          </div>
        )}
      </>
    );