const MySelect = ({ name, options }) => {
const register = useContext(MyFormContextRegister)
return (
<select {...register(name)}>
{options.map((option, index) =>
<option key={index} value={option.value}>{option.title}</option>)
}
</select>
)
}
const MyForm = () => {
const { register, handleSubmit } = useForm()
return (
<MyFormContextRegister.Provider value={register}>
<form onSubmit={handleSubmit}>
<MySelect name="select-name" options={[{title: 'foo', value: 'bar'}]} />
</form>
</MyFormContextRegister.Provider>
)
}
https://tc39.es/ecma262/multipage/keyed-collection...
Можете посмотреть, как оно под капотом работает.