Menu
react gives me a 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)."
However my checbox is change via the state property. Am I missing something obvious?
import React from 'react'; // Components import Checkbox from './checkbox'; import HelpBubble from './helpBubble'; export default class CheckboxField extends React.Component { constructor(props) { super(props); this.state = {value: props.value}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } componentWillReceiveProps(nextProps) { if (nextProps.value !== this.props.value) { this.setState({value: nextProps.value}); } } render() { const {label, meta = {}, help, disabled, required, onChange} = this.props; return ( <label className="checkbox-wrap form-field"> <Checkbox disabled={disabled} type="checkbox" onChange={(event) => { onChange(event, !this.state.value); }} checked={this.state.value}/> {label && ( <div className="checkbox-label"> {label} {required && <div className="form-field__required"/>} </div> )} {help && <HelpBubble help={help}/>} {meta.error && meta.touched && ( <div className="input-error">{meta.error}</div> )} </label> ); }} Parent component: handleChangeParams(key, value) } /> Handle change params changes the value in model and calls server. Depending on server result, the value can change.
Thanks in advance.
635
The warning "A component is changing an uncontrolled input to be controlled" occurs when an input value is initialized to undefined but is later changed to a different value. To fix the warning, initialize the input value to an empty string, e.g. value={message || ''} .
In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.
The standard way to handle form input value changes is to handle them with React. This is a technique called controlled components. We can create controlled components with input , textarea , and select elements. They maintain their own state, and updates are based on user input.
Legally Mixing Controlled and Uncontrolled A single value within a component's data set (props and state), can be either controlled or uncontrolled, but not both. A single component can, however, have a mixture of controlled and uncontrolled values.
If your state is initialized with props.value being null React will consider your Checkbox component to be uncontrolled.
Try setting your initial state so that value is never null.
this.state = { value: props.value || "" }; If you are using a checkbox react won't like a string either so instead try
this.state = { checkboxValue: props.checkboxValue || false }; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
