Use array of strings in React Hook Form

Question

In a form that I am making the material that is being created in the form should have multiple width options that can be added. This means that I will have a text input where the user can add an option, and when this option is added, it should be added to the React Hook Form widthOptions array, without using the regular react state. How would one do this? How do you add an item to the total React Hook Form state, I only see options for just one input field corresponding to a property.

This is how i would do it using the regular React state

import { TrashIcon } from "@heroicons/react/24/outline";
import React, { useRef, useState } from "react";

const Test = () => {
  const [widthOptions, setWidthOptions] = useState<string[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);
  const removeWidthOption = (widthOption: string) => {
    setWidthOptions(widthOptions.filter((option) => option !== widthOption));
  };

  const addWidthOption = (widthOption: string) => {
    setWidthOptions([...widthOptions, widthOption]);
  };

  const editWidthOptions = (widthOption: string, index: number) => {
    const newWidthOptions = [...widthOptions];
    newWidthOptions[index] = widthOption;
    setWidthOptions(newWidthOptions);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={() => addWidthOption(inputRef?.current?.value)}>
        Add Width Option
      </button>
      {widthOptions.map((option, index) => (
        <div className="flex">
          <input
            type="text"
            value={option}
            onChange={() => editWidthOptions(option, index)}
          />
          <button type="button" onClick={() => removeWidthOption(option)}>
            <TrashIcon className="w-5 h-5 mb-3 text-gray-500" />
          </button>
        </div>
      ))}
    </div>
  );
};

export default Test;

Disco · Accepted Answer · 2022-11-24 09:40:07Z

1

You can just the controller component for this as for all other fields. Since you have not shared any of you code here is a generic multi-select

<Controller
  name={name}
  render={({ field: { value, onChange, ref } }) => {
    return (
    // You can use whatever component you want here, the you get the value from the form and use onChange to update the value as you would with a regular state
      <Test
        widthOptions={value}
        setWidthOptions={onChange}
      />
    );
  }}
/>;

https://react-hook-form.com/api/usecontroller/controller/

And in you Test component remove the state and get the props instead

const Test = ({widthOptions, setWidthOptions}) => {
const inputRef = useRef<HTMLInputElement>(null);
.
.
.

edited Nov 24, 2022 at 9:40

answered Nov 23, 2022 at 12:07

Disco

1,6641 gold badge8 silver badges14 bronze badges

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

4 Comments

Bowis Over a year ago

Ok, and what needs to be done in the onChange? How do i refer to the state of the field / form?

Disco Over a year ago

React hook form hold the state, name acts as the key. onChange just take any value and set it as the new value of the name. This is basically the same as what I have in the example above onChange={(newArray: string[])=>onChange(newArray)} If you need further assistance you will have to updated your question with the code you need help with.

Bowis Over a year ago

I have added an example of what i want, using regular React state

Disco Over a year ago

@Bowis great job on the component, I have updated my answer. As you can see you can just replace the state with props.

Collectives™ on Stack Overflow

Use array of strings in React Hook Form

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related