React Select default value showing on form field but showing undefined while submitting

Question

I am using react select https://www.npmjs.com/package/react-select with react-hook-form and this is my code:

import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as Yup from "yup";
import Select from "react-select";

export function App() {
  const schema = Yup.object({
    name: Yup.string().required().min(3).max(191).label("Collection Name"),
    marketplaces: Yup.mixed().nullable().label("Marketplaces")
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
    control
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = async (input) => {
    console.log("input", input);
  };

  const marketplace_options = [
    { label: "aut", value: 1 },
    { label: "nobis", value: 2 },
    { label: "nostrum", value: 3 },
    { label: "reprehenderit", value: 4 },
    { label: "unde", value: 5 },
    { label: "est", value: 6 },
    { label: "amet", value: 7 },
    { label: "dolores", value: 8 },
    { label: "tempora", value: 9 },
    { label: "occaecati", value: 10 },
    { label: "recusandae", value: 11 }
  ];

  const item = {
    id: 12,
    name: "test-collection",
    marketplaces: [
      {
        label: "amet",
        value: "7",
        pivot: { collection_id: 12, marketplace_id: 7 }
      },
      {
        label: "tempora",
        value: "9",
        pivot: { collection_id: 12, marketplace_id: 9 }
      }
    ]
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("name")}
        placeholder="Name"
        defaultValue={item.name}
      />
      <Controller
        name="marketplaces"
        control={control}
        render={({ field }) => (
          <Select
            {...field}
            options={marketplace_options}
            isMulti
            className="form-control w-full"
            defaultValue={item.marketplaces}
          />
        )}
      />
      <input type="submit" />
    </form>
  );
}

But, it is showing undefined while trying to submit (without changing the marketplaces), but if I change it once, then only the value will be submitted.

Codepen link

Saroj Shrestha · Accepted Answer · 2022-02-20 07:22:56Z

1

Solved: Fixed by moving, defaultValue from select to Controller tag. Something like:

<Controller
        name="marketplaces"
        control={control}
        defaultValue={item.marketplaces}
        render={({ field }) => (
          <Select
            {...field}
            options={marketplace_options}
            isMulti
            className="form-control w-full"
          />
        )}
      />

answered Feb 20, 2022 at 7:22

Saroj Shrestha

2,9156 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Select default value showing on form field but showing undefined while submitting

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related