Oh, you mean the missing curly braces? Yeah, I forgot to type those, but they are in my code. What I'm stuck on is how to change those input values from another component? I have lifted the state to a shared parent. But when I add in value={batchDates.startDate} to my input, I get: Warning: A component is changing an uncontrolled input of type date to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
OK, nevermind, figured it out! :) I wasn't initializing my state variables correctly. But I think in order to be able to set it from a different component, I will need to have that value attribute set to a state value.
I think the confusion comes from the fact that setting onChange in itself doesn't make the input controlled unless you are setting value as well.
And you are right, the controlled component value needs to be initialized so the input state should be initialized first: const [input, setInput] = useState({ username: "", password: "" }). These initial values could be passed into the custom hook too.
Oh, you mean the missing curly braces? Yeah, I forgot to type those, but they are in my code. What I'm stuck on is how to change those input values from another component? I have lifted the state to a shared parent. But when I add in
value={batchDates.startDate}to my input, I get:Warning: A component is changing an uncontrolled input of type date to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.Interesting, Is it okay if I take a look at some of your code?
OK, nevermind, figured it out! :) I wasn't initializing my state variables correctly. But I think in order to be able to set it from a different component, I will need to have that value attribute set to a state value.
Awesome 😃
I think the confusion comes from the fact that setting
onChangein itself doesn't make the input controlled unless you are settingvalueas well.And you are right, the controlled component value needs to be initialized so the input state should be initialized first:
const [input, setInput] = useState({ username: "", password: "" }). These initial values could be passed into the custom hook too.this worked. Thanks Orsi :)