Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – can not use an id that I saved in props as default value in react select

I have a component that renders a reusable dropdown list. When I use it to add a new project, I can set category. But, when I use it to edit the project, the dropdown doesn’t show the selected category. However I have sent the category _id as props.

export default function RHFSelect({
  label,
  name,
  register,
  options,
  required,
  validationschema,
  errors,
  categoryID = "",
}) {
  return (
    <div>
      <select
        className="textField__input"
        {...register(name, validationschema)}
        id={name}
        defaultValue={categoryID}
      >
        <option value="">Please select the project category</option>

        {options.map((option) => {
          return (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          );
        })}
      </select>
      {errors && errors[name] && (
        <span className="text-error block text-sm mt-2">
          {errors[name]?.message}
        </span>
      )}
    </div>
  );
}

The options is list of categories fetch from DB.
The categoryID is an empty string by default but in edit project mode, it is an id of a category, the project belongs to it.
I expect that in add mode it shows "Please select project category" and in edit mode it shows the category that I selected before.

Additional note:
Unfortunately, I forgot to add a hint and the hint is I have problem in initial render after that the dropdown shows selected category correctly.

Thanks in advanced.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As I noticed I fetch categories list asynchronously so, when the dropdown component renders the list is empty so I add a conditional render.

      {!categories || categories.length === 0 ? (<Loader />) : (<DropDown/>)}

  2. 0

    Don’t use default value directly in select instead use in react-hook-form or any library form you are using or update like this for a simple solution

    <select
 className="textField__input"
 {...register(name, validationschema)}
 id={name}
 value={categoryID}
 onChange={(e) => register(name).onChange(e)}>

    or use
    setValue('notRegisteredInput', 'value'); // example in useEffect hook to set the initial value in re-render.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search