React hook form dynamic input control not working

Question

I'm using react hook form and I want to be set dynamically one text input box based on one radio button selected condition. I have radio buttons that track the delivery methods are home, office and others. if the user clicks other I want to show an input box and want to hide the radio buttons. I hope that makes sense. I tried a lot of ways it doesn't work. Any idea will helpful I not working properly

 {(watch('tag') == 'others') ?   <Input
                  {...register('otherField')}
                  label="Others"
                  variant="outline"
                  className="col-span-2 w-full"
                />: 
                <div className="flex items-center space-x-4 rtl:space-x-reverse">
                <Radio
                  id="home"
                  {...register('tag')}
                  type="radio"
                  value={'home'}
                  label="Home"
                  name={'tag'}
                />
                <Radio
                  id="work"
                  
                  {...register('tag')}
                  type="radio"
                  value={'Work'}
                  label="Work"
                  name={'tag'}
                />
                <Radio
                  id="others"
                  {...register('tag')}
                  type="radio"
                  value={'others'}
                  label="Others"
                  name={'tag'}
                />
              </div> 
              }

Radio Button Component

import React, { InputHTMLAttributes } from 'react';
import styles from './radio.module.css';

export interface Props extends InputHTMLAttributes<HTMLInputElement> {
  className?: string;
  label?: string;
  name: string;
  id: string;
  error?: string;
}

const Radio = React.forwardRef<HTMLInputElement, Props>(
  ({ className, label, name, id, error, ...rest }, ref) => {
    return (
      <div className={className}>
        <div className="flex items-center">
          <input
            id={id}
            name={name}
            type="radio"
            ref={ref}
            className={styles.radio_input}
            {...rest}
          />

          <label htmlFor={id} className="text-body text-sm">
            {label}
          </label>
        </div>

        {error && (
          <p className="my-2 text-xs ltr:text-right rtl:text-left text-red-500">
            {error}
          </p>
        )}
      </div>
    );
  }
);
export default Radio;

on change of radio button are you getting the required value? Kindly show you radio button seletor and the change method on it? — Wahab Shah
– Wahab Shah, Commented Apr 13, 2022 at 5:16
Am I overlooking it or where is the code snippet where you are setting your TagMethod value on change of the radio buttons? — Wahab Shah
– Wahab Shah, Commented Apr 13, 2022 at 5:29
TagMethod values is got from the useWatch declare on the top I will update @WahabShah — Noob
– Noob, Commented Apr 13, 2022 at 5:33
May we please know, for the Radio with value={AddressType.Others} how is the onClick event handled? — jsN00b
– jsN00b, Commented Apr 13, 2022 at 5:45
AddressType.others it just naming convention and onClick for test @jsN00b — Noob
– Noob, Commented Apr 13, 2022 at 5:48

adel · Accepted Answer · 2022-04-13 07:51:27Z

hello i just replicated your code this sandbox and it's working fine: codesandbox

App.js

import "./styles.css";
import { useForm } from "react-hook-form";

import Radio from "./Radio";

export default function App() {
  const { register, handleSubmit, watch } = useForm();
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {watch("tag") === "others" ? (
        <input
          {...register("otherField")}
          variant="outline"
          className="col-span-2 w-full"
        />
      ) : (
        <div className="flex items-center space-x-4 rtl:space-x-reverse">
          <form>
            <Radio
              id="home"
              {...register("tag")}
              type="radio"
              value={"home"}
              label="Home"
              name={"tag"}
            />
            <Radio
              id="work"
              {...register("tag")}
              type="radio"
              value={"Work"}
              label="Work"
              name={"tag"}
            />
            <Radio
              id="others"
              {...register("tag")}
              type="radio"
              value={"others"}
              label="Others"
              name={"tag"}
            />
            <button onClick={handleSubmit((val) => console.log(val))}>
              click
            </button>
          </form>
        </div>
      )}
    </div>
  );
}

Collectives™ on Stack Overflow

React hook form dynamic input control not working

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