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

Viktor

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.

mindlis

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 || "" };

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

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

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

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

Checkbox based on array in React: controlled vs uncontrolled component

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

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 an uncontrolled input of type text to be controlled?

Is this a controlled or uncontrolled React component?

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

React Formik Warning: A component is changing an uncontrolled input to be controlled

On clearing input label I'm getting a component is changing an uncontrolled input of type text to be controlled

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

'A component is changing a controlled input to be uncontrolled' and partial state update

Warning- A component is changing a controlled input to be uncontrolled

Generate input/label element in React child component conditionally but got a 'component is changing an uncontrolled input to be controlled.' warning

shadcn Input + Form + Zod "A component is changing an uncontrolled input to be controlled"

TOP Ranking

HotTag

Archive