Odtnhj

The full error:
A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa)
My code:

//Form.js
componentDidMount = () => 
 let state = ;
 const inputProps = this.props;
 //example for inputProps: 
 // nameInput: element: Input/*Input.js*/, value: "initial value"
 //
 Object.keys(inputProps).forEach(key => 
 const input = inputProps[key];
 const value = input;
 state[key] = 
 ...input,
 value,
 onChange: this.inputChange(key)
 
 )
 this.setState(state)

inputChange = key => event => this.setState(
 [key]: 
 ...this.state[key],
 value: event.target.value
 
)
inputs = () => Object.keys(this.state).map(key => 
 const input = this.state[key];
 const element, typeCheck, ...props = input;
 return React.createElement(element, props);
)
//Input.js
//the error comes after typeChecking in Form.js I just didn't wanted to show unnecessary code
const Input = (error, ...props) => <div className="inputContainer">
 React.createElement("input", props)
 <p className="inputError">error </p>
</div>

So what happens here is that I have a component Form which accepts an object as it's prop to define which inputs needed to create. When it did mount, it processes the inputs properties and sets it as it's state. It's a bit sneaky because we might get value as prop of the inputs, but we put it to the Form's state. Also, we also give the value to the Input element, so it's controlled, and if the input changes, triggers a function which is called in the Form, and set the value to it's own state, then gives the updated value back to the Input. So it seems like the input is controlled, but I still get the error. Everything works well, so the input gets the updated values, and sends the changed input, I just get the error and it's annoying.

If the input value is initialized as null or undefined you'll always get this error. You can avoid it by setting the input value to an empty string.