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

Gergő Horváth

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.

Josef Fazekas

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

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

React form error changing a controlled input of type text to be uncontrolled

React-Mobx Warning: A component is changing an uncontrolled input

Warning: A component is changing a controlled input of type undefined to be uncontrolled

ReactJS Warning: TextField is changing an uncontrolled input of type text to be controlled

React a component is changing an uncontrolled input of type checkbox to be controlled

Formik component changing an uncontrolled input of type text to be controlled

A component is changing an uncontrolled input of type checkbox to be controlled in React JS

Material UI Select Component- A component is changing a controlled input of type text to be uncontrolled

Email Input Warning - A component is changing a controlled input of type text to be uncontrolled

A component is changing a controlled input of type text to be uncontrolled - ReactJS

Reactjs: Warning: A component is changing a controlled

React.JS Typescript - OnChange says "A component is changing a controlled input of type text to be uncontrolled in OnChange" for State Object

React: uncontrolled/controlled input

A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled

Can you help me to get rid of this? Warning: A component is changing an uncontrolled input of type search to be controlled

A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined

Uncontrolled input of type text to be controlled warning

Warning: TextField is changing a controlled input of type text to be uncontrolled

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

Is this a controlled or uncontrolled React component?

Uncontrolled input of type text to be controlled In Fomik Feild

ReactJS, A component is changing an uncontrolled input of type number to be controlled

React Input Warning: A component is changing a controlled input of type text to be uncontrolled

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

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

Getting "A component is changing an uncontrolled input to be controlled (...)" when using KeyboardDatePicker

(ReactJS) "Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined ..."

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined