react uncontrolled input issue

Question

User1034446946 posted

hi 

i have a form  when the function component is call i do

const [MyForm, setMyForm] = useState({})

then i have a onChangeHandler which gets the element name and uses it to as the property name in state to store the information

however this causes and error the first time it happens with

A component is changing an uncontrolled input of type text to be controlled

now i know this is because the property name isn't defined in the state, i can simply add the property name to the state object, however my forms are really complex so i don't really want to do that.

is there a way i can build function, that looks at the state for the propery and if its not there add it without a value so i don't get the error? or is there a better way to handle it?

any advice would be appriciated.

Answer 1

User-474980206 posted

The error is from trying to set the value of an uncontrolled component. You should use defaultValue to set the initial value. You are probably trying to mix uncontrolled and controlled code.


For an example of an uncontrolled form and hooks see

https://dev.to/bluebill1049/uncontrolled-form-for-react-2b3n

If you are using a controlled form, you are probably passing null for the value, causing the control to be uncontrolled. If this is the case, and you don’t preinit state, just coalesce.

<input value={MyForm.fieldname || ''} >

Also it goes again style to use MyForm instead of myForm. Initial caps are for class names, or react tag name functions.

Answer 2

User1034446946 posted

The error is from trying to set the value of an uncontrolled component. You should use defaultValue to set the initial value. You are probably trying to mix uncontrolled and controlled code.

Thats what i was trying to say, just not very well.

I was hoping i could just check the values if it was was missing using a function on the onchange event (although i guess that could cause performace issues), turning it from uncontrolled to controlled dynamically,

My c# models are complex, (need to do more research on complex forms)

Thanks for the tips, understand all the different brackets outside the property ones and naming conventions  are cause me headaches, i would love a cheat sheet with them on, while they get mentioned across tutorials i would be nice to have them in one place, i am sure ill get it eventually

Answer 3

User-474980206 posted

its simple, all react components have props argument (convention calls it props, you can use any name):

    function MyComponent(props) {...}

in jsx, you set the props properties as a string/value or an expression ({})

    <MyComponent a="hi" b={1+2} onChange={handleChange)/>

this translates to:

    MyComponent({ a: "hi", b: 1+2, onChange: handleChange})

so in the function:

    console.log(props.a) // "hi"
    console.log(props.b) // 3
    if (props.onChange) props.onChange(value); // call onChangeHandler

as JSX predates the javascript array spread operator, it has its own so:

    <MyComponent a = "hi" {...props} />

translates to:

    MyComponent({a: "hi",  ...props})