checkbox input component

[novaknole]

I have a component which contains:

• checkbox
• input type text or input type file depending on checkbox being turned on or off.

Let's say checkbox is turned on and I show <input type text. Let's type something into it. Now, I turn off checkbox. and show file input. Let's choose the file. and then click submit. After clicking submit, I console log the following.

console.log(getValues('text'), getValues('file'), ' good')

And this prints both the text and file too which seems wrong, because After typing text in the input text field, I switched to file input and input type text was destroyed. I think getValue('text') should be printing empty, but it still remembers the value.

[thanh-nguyen-95]

Adding shouldUnregister: true option when register the inputs should fix your problem

[thanh-nguyen-95]

Having an external state (useState for example), change it together with react-hook-form's state and use it as defaultValue should work.

I think it's better to clear the input because it's a "either this or that" case. The user clearly (pun intended) switched to file input so we should not keep the old text input value.

[novaknole]

@thanh-nguyen-95

The component we are talking about with checkbox + input type text or input type file is a child component. Even if I have the useState in it which figures out which one is chosen(file or text), i still need to pass isFileChosen prop from the parent. so that in the parent, I know which one is chosen. I was thinking of achieving this without passing isFileChosen from the parent at all.

any idea ?

[thanh-nguyen-95]

Can you provide a CodeSandbox or a code snippet so I can have a look at your current solution?

[novaknole]

@thanh-nguyen-95

https://codesandbox.io/s/react-hook-form-js-forked-zvp0y?file=/src/App.js:759-772

for some reason, i couldn't quickly make checkbox work(showing input type text or input type file).. but you should get the idea.

I am trying to get rid of isFile prop on the child. It would be possible to get rid of it, if I use shouldUnregister:true on the fields, because in the parent, on submit, I'd check getValue('reasonFile') and if it's not undefined, then it means user chose the file, otherwise, it's a text.

The tricky part is if I don't want to use shouldUnregister. Then, in the parent, how do I get to know if user has the checkbox turned for input file or input text. One way of doing this was to pass isFile prop. and then, in the parent, I can check it out quickly. I think using isFile prop is a cleaner solution. (I'd make isFile prop optional and add shouldUnregister prop too) this way I'd have both of the ways.

WDYT ?

[thanh-nguyen-95]

From my point of view, those text input and file input should not be composed into a custom component for several reasons:

• They are registered under different names reason and reasonFile
• If you're planning on re-using it somewhere else, it's not flexible (for example, I need a select input and file input combo). You will end up adding more props and handle it inside the custom component, which is not ideal.
• There are props inside that need to be exposed to parent component (isFile). You can solve this with rendering props pattern but it's not "clean"

My suggestion is to split those 2 inputs and manage them inside parent component like so:

function ParenComponent() {
  const [isFile, setIsfile] = useState(false)

  const { control } = useForm()

  return (
    <>
      /* other components go here */
      {isFile
        ? <Controller control={control} name="reasonFile" render={({ field }) => <CustomFileInput {...field} />} />
        : <Controller control={control} name="reasons" render={({ field }) => <CustomTextInput {...field} />} />
      }      
    <>
  )
}

If you need to style them with a wrapper, simply do:

function ComboInputWrapper({ children }) {
  return (
    <div className="your-custom-styling-class">
      {children}
    </div>
  )
}

// usage
<ComboInputWrapper>
  {isFile
    ? <Controller control={control} name="reasonFile" render={({ field }) => <CustomFileInput {...field} />} />
    : <Controller control={control} name="reasons" render={({ field }) => <CustomTextInput {...field} />} />
  }
</ComboInputWrapper>

Custom hooks, Implicit props, Render props are some of the keywords you should look up. I believe they will be helpful when creating components.

Hope this helps.

P.s: This is a bit out of scope since it's not releated to react-hook-form. You should try other places like reddit for more suggestions. Good luck!