You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I´m trying to build a form and using react-hook-form. I have problem that my radio and select does not update the value in object i get from handleSubmit function.
I have built my own input components for: text, number, radio and select.
❗The problem is when the user choose an option in my select it register, but if the user then change the option they have chosen, react hook form does not register. The same is with my radio-input element.
This is how my Select component look when it is implemented <Selectinput register={register} name="healthGoal" placeholderText="Choose goal" textContent={user ? user.Activitylevel.value : null} options={goals} // is array onSelect={handleHealthGoal} edit={forNewUser} forNewUser={forNewUser} />
This is how the component Selctinput is written:
`
export default function Selectinput({ register, onSelect, placeholderText, options, name, forNewUser, edit }) {
const [showDropdown, setShowDropDown] = useState(false);
const [placeholder, setPlaceholder] = useState(placeholderText);
)}
</>
);
}
`
The goal is to make components that can be re-used. The reason for the state is visual effect as you can see I do conditionally CSS with tailwind.
I send in the same name for the register to group them:
`
<Radiobutton
register={register}
name="useImperial" //<---
type="radio"
textContent="Imperial"
value={true}
onClick={() => {
setHealtConstants((prevState) => ({
...prevState,
useImperial: true,
}));
}}
errors=""
errorMsg=""
checked={user ? user.isMale : healtConstants.useImperial}
edit={edit}
forNewUser={forNewUser}
/>
</div>`
I have no idea of which documentation to read to tackle this problem. Can´t find anything on the web-page that explain this well.
Thanks in advanced for reading and helping
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I´m trying to build a form and using react-hook-form. I have problem that my radio and select does not update the value in object i get from handleSubmit function.
I have built my own input components for:
text
,number
,radio
andselect
.❗The problem is when the user choose an option in my select it register, but if the user then change the option they have chosen, react hook form does not register. The same is with my
radio-input
element.This is how my Select component look when it is implemented
<Selectinput register={register} name="healthGoal" placeholderText="Choose goal" textContent={user ? user.Activitylevel.value : null} options={goals} // is array onSelect={handleHealthGoal} edit={forNewUser} forNewUser={forNewUser} />
This is how the component Selctinput is written:
`
export default function Selectinput({ register, onSelect, placeholderText, options, name, forNewUser, edit }) {
const [showDropdown, setShowDropDown] = useState(false);
const [placeholder, setPlaceholder] = useState(placeholderText);
return(
{options.map((option, index) => { return (- {
setPlaceholder(option.textContent);
setShowDropDown(false);
// Sends back the value
{errorMsg} }
`
The radio input looks when it is implemented:
<Radiobutton register={register} name="useImperial" type="radio" textContent="Imperial" value={true} onClick={() => { setHealtConstants((prevState) => ({ ...prevState, useImperial: true, })); }} errors="" errorMsg="" checked={user ? user.isMale : healtConstants.useImperial} edit={edit} forNewUser={forNewUser} />
This is how it looks inside:
`import style from "./styleCheckbox.module.css";
export default function Radiobutton({
register,
name,
value,
placeholder,
min,
onClick,
onChange,
onBlur,
errors,
errorMsg,
required,
type,
checked,
textContent,
forNewUser,
edit,
}) {
return (
<>
{forNewUser || edit ? (
<label
className={
text-sm ${ checked ? "border-px border-main bg-main text-white" : "border-[1px] border-[#616773] text-txtInput " } rounded-lg px-3 py-1 plabel flex justify-center w-full
}>
<input
{...register(name, {
minLength: min,
onChange: () => (value = !value),
onBlur: onBlur,
setValueAs: (v) => Boolean(v),
})}
onClick={onClick}
type={type}
placeholder={placeholder}
value={Boolean(value)}
checked={checked}
className={
${style.CBinputEl} w-full text-txtInput
}/>
{textContent ? textContent : "No text"}
{errors[name] &&
) : (
{textContent}
)}
</>
);
}
`
The goal is to make components that can be re-used. The reason for the state is visual effect as you can see I do conditionally CSS with tailwind.
I send in the same name for the register to group them:
`
<Radiobutton
register={register}
name="useImperial" //<---
type="radio"
textContent="Metric"
value={false}
onClick={() => {
setHealtConstants((prevState) => ({
...prevState,
useImperial: false,
}));
}}
errors=""
errorMsg=""
checked={user ? user.useImperial : !healtConstants.useImperial}
edit={edit}
forNewUser={forNewUser}
/>
Beta Was this translation helpful? Give feedback.
All reactions