Code change:
expect(console.error.argsForCall.length).toBe(1); }); <ins> it('should warn if controlled input switches to uncontrolled', function() { var stub = <input type="text" value="controlled" onChange={emptyFunction} />; var container = document.createElement('div'); ReactDOM.render(stub, container); ReactDOM.render(<input type="text" />, container); expect(console.error.argsForCall.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'A component is changing a controlled input of type text to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or viceversa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components' ); }); it('should warn if controlled input switches to uncontrolled with defaultValue', function() { var stub = <input type="text" value="controlled" onChange={emptyFunction} />; var container = document.createElement('div'); ReactDOM.render(stub, container); ReactDOM.render(<input type="text" defaultValue="uncontrolled" />, container); expect(console.error.argsForCall.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'A component is changing a controlled input of type text to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or viceversa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components' ); }); it('should warn if uncontrolled input switches to controlled', function() { var stub = <input type="text" />; var container = document.createElement('div'); ReactDOM.render(stub, container); ReactDOM.render(<input type="text" value="controlled" />, container); expect(console.error.argsForCall.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'A component is changing a uncontrolled input of type text to be controlled. ' + 'Input elements should not switch from uncontrolled to controlled (or viceversa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components' ); }); it('should warn if controlled checkbox switches to uncontrolled', function() { var stub = <input type="checkbox" checked={true} onChange={emptyFunction} />; var container = document.createElement('div'); ReactDOM.render(stub, container); ReactDOM.render(<input type="checkbox" />, container); expect(console.error.argsForCall.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'A component is changing a controlled input of type checkbox to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or viceversa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components' ); }); it('should warn if controlled checkbox switches to uncontrolled with defaultChecked', function() { var stub = <input type="checkbox" checked={true} onChange={emptyFunction} />; var container = document.createElement('div'); ReactDOM.render(stub, container); ReactDOM.render(<input type="checkbox" defaultChecked={true} />, container); expect(console.error.argsForCall.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'A component is changing a controlled input of type checkbox to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or viceversa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components' ); }); it('should warn if uncontrolled checkbox switches to controlled', function() { var stub = <input type="checkbox" />; var container = document.createElement('div'); ReactDOM.render(stub, container); ReactDOM.render(<input type="checkbox" checked={true} />, container); expect(console.error.argsForCall.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'A component is changing a uncontrolled input of type checkbox to be controlled. ' + 'Input elements should not switch from uncontrolled to controlled (or viceversa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components' ); }); it('should warn if controlled radio switches to uncontrolled', function() { var stub = <input type="radio" checked={true} onChange={emptyFunction} />; var container = document.createElement('div'); ReactDOM.render(stub, container); ReactDOM.render(<input type="radio" />, container); expect(console.error.argsForCall.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'A component is changing a controlled input of type radio to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or viceversa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components' ); }); it('should warn if controlled radio switches to uncontrolled with defaultChecked', function() { var stub = <input type="radio" checked={true} onChange={emptyFunction} />; var container = document.createElement('div'); ReactDOM.render(stub, container); ReactDOM.render(<input type="radio" defaultChecked={true} />, container); expect(console.error.argsForCall.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'A component is changing a controlled input of type radio to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or viceversa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components' ); }); it('should warn if uncontrolled radio switches to controlled', function() { var stub = <input type="radio" />; var container = document.createElement('div'); ReactDOM.render(stub, container); ReactDOM.render(<input type="radio" checked={true} />, container); expect(console.error.argsForCall.length).toBe(1); expect(console.error.argsForCall[0][0]).toContain( 'A component is changing a uncontrolled input of type radio to be controlled. ' + 'Input elements should not switch from uncontrolled to controlled (or viceversa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components' ); }); </ins> it('sets type before value always', function() { var log = []; var originalCreateElement = document.createElement;

Related discussion:
text: A component should either be using uncontrolled inputs or controlled inputs, but not both (they should pick a single paradigm, for the lifetime of the component). As a result, an instance of an input should never switch from controlled to uncontrolled (or vice versa). We should warn when an input that was previously controlled becomes uncontrolled, or vice versa.
Could you provide some code as to how a controlled input becomes uncontrolled and vice versa?
I just got this warning, can anyone point me to an explanation with a bit more detail? ty
put your code in a stackoverflow question, and link it here.
newswim Read about controlled components and uncontrolled components. Choose one (preferably controlled components), and don't ever use uncontrolled components. If you are using controlled components, make sure you never pass a or to React. And yes, is correct, this is better addressed on StackOverflow.
I don't consider an input's value being null or undefined as a qualifying factor in determining if an input is controlled or uncontrolled. Controlled forms are a paradigm that may share some qualities with uncontrolled forms. It's about listening to changes and updating the state of the value, but React shouldn't stipulate that the value can't be undefined. It's an additional burden to those following good practice in using controlled forms. This warning should occur if both defaultValue and value props are used throughout the input's lifecycle.
I agree, but in the sense that they shouldn't be a single component at all, they should be two separate. Regardless I would say that actually providing the correct string value to an interactive component that expects a string value seems like a rather good practice. Otherwise you will have two distinct value states and , but both being intended to mean the exact same thing. No, because being or makes it uncontrolled by definition and you shouldn't switch between controlled and uncontrolled.