Passing value to hidden input from dropdown menu in react-CodePudding

I have react-select dropdown menu and hidden input which I pass to form when submiting... using useState hook I created variable which tracks changes to react-select dropdown menu. Hidden input has this variable as value also. I thought this would be enough. But when I submit the form, console. log shows me that value of input is empty despite that variable that was selected from dropdown menu is actually updated.

I mean variable that I have chosen console logs some value, but hidden input thinks that it is still empty.

Does it means I have to rerender manually page each time I change that variable so input gets it's new value using useEffect ? Which is bad solution for me, I don't like it, thought it would be done automatically.

Or instead of useState I must create and use variable via Redux ? Which I also don't like, use redux for such small thing fills overcomplicated.

Isn't there any nice elegant solution ? :)

import { useForm } from 'react-hook-form';

        const [someVar,setSomeVar]=useState('');
        
const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: 'onBlur' });
  const handleFormSubmit = (data) => {
       console.error('success');
  };
  const handleErrors = (errors) => {
    console.error(errors);
    console.log(document.getElementsByName('hiddenInput')[0].value);
  };
  const options = {
    hiddenInput: {
      required: t('hiddenInput is required'),
    },
  };


        .......
    <form onSubmit={handleSubmit(handleFormSubmit, handleErrors)}>
         <Select
         options='...some options list'
         onChange={(value) => setSomeVar(value)}
        />
        <input
        name='hiddenInput'
        value={someVar} 
        {...register('hiddenInput', options.hiddenInput)}
        />
    <button>submit</button>
        </form>

UPDATED

CodePudding user response：

Its because getElementsByName returns an array of elements.

You probably want

document.getElementsByName('hiddenInput')[0].value

I should add that really you should use a ref attached to the input and not access it via the base DOM API.

const hiddenRef = useRef(null)

// ...

cosnt handleSubmit =(e)=>{
    console.log(hiddenRef.current.value);

}

// ...

  <input
    name='hiddenInput'
    value={someVar} 
    ref={hiddenRef}
    />

However as you are using react-hook-form you need to be interacting with its state store so the library knows the value.

const {
    register,
    handleSubmit,
    formState: { errors },
    setValue
  } = useForm({ mode: 'onBlur' });

// ...
    <form onSubmit={handleSubmit(handleFormSubmit, handleErrors)}>
         <Select
         options='...some options list'
         onChange={(value) => setValue('hiddenInput', value)}
        />
        <input
        name='hiddenInput'
        {...register('hiddenInput', options.hiddenInput)}
        />
    <button>submit</button>
        </form>

You can remove const [someVar,setSomeVar]=useState('');

However, this hidden input is not really necessary as you mention in comments. You just need to bind the dropdown to react hook form.

// controller is imported from react hook form

<form onSubmit={handleSubmit(handleFormSubmit, handleErrors)}>
<Controller
 control={control} // THIS IS FROM useForm return
  name="yourDropdown"
  rules={{required: true}}
  render={({
    field: { onChange, value, name, ref }
  }) => (
       <Select
         options={options}
         inputRef={ref}
         value={options.find(c => c.value === value)}
         onChange={val => onChange(val.value)}
        />
  )}
/>
  
    <button>submit</button>
        </form>