index.js:2178 Warning: A component is changing an uncontrolled input of type checkbox 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. More info: https://fb.me/react-controlled-components

Hi everyone,

Bit of a silly error I ran into today. This one took an embarrassingly long time to figure out unfortunately:

It turned out that the error was a result of not having added the state variable in the constructor. It was then being created onChange and converting the input element into a controlled input.

I was trying to use a checkbox in my form and had copied the input from another view:

Ticket
 {this.handleChange(event)}} />

HandleChange is as follows:

/* Sets a state value based on the name of the input changed */
handleChange: function (caller, event) {

    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    caller.setState({ [name]: value });
}

Bit of a silly one, but hopefully it will be able to help out anyone else who runs into it!

Cheers,
Chris