Warning when changing controlled input value in React

Question

I'm making a little blog in React and I have a problem updating the state on input change event.

The warning is:

Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component

This is my code:

Constructor:

constructor(props){
        super(props);

        this.state = {
            id: '',
            post: {
                title: '',
                slug: '',
                content: ''
            }
        }

        this.handleChange = this.handleChange.bind(this);

    }

handleChange function

handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

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

input render:

render(){
        return (
            <div>
                <AdminMenu />
                <div id="admin-post-form">
                    <div className="input-group vertical">
                        <label>Título</label>
                        <input
                            name="title"
                            placeholder="Título"
                            type="text"
                            value={this.state.post.title}
                            onChange={this.handleChange}
                        />
                    </div>
                    <div className="input-group vertical">
                        <label>Slug</label>
                        <input
                            name="slug"
                            placeholder="Slug"
                            type="text"
                            value={this.state.post.slug}
                            onChange={this.handleChange}
                        />
                    </div>

                </div>
            </div>
        )
    }

What's wrong with my code ? The field is updated, but I get that warning.

Thanks!

reactjs.org/docs/uncontrolled-components.html

Dom
– Dom

2018-04-22 18:55:10 +00:00
Commented Apr 22, 2018 at 18:55 — Dom
– Dom, Commented Apr 22, 2018 at 18:55

Dan Abramov · Accepted Answer · 2018-04-22 18:58:33Z

9

This:

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

will replace this.state.post completely with an object that only has a single key. For example, if name is slug, you will replace post with { slug: 'something' }.

As a result, if you edit one field, all other fields will become undefined. React treats value={undefined} as an uncontrolled component and warns you.

To fix the issue, you probably want to merge post updates with the existing object instead of replacing it:

    this.setState(prevState => ({
        post: {
            ...prevState.post,
            [name]: value
        }
    }));

answered Apr 22, 2018 at 18:58

Dan Abramov

269k87 gold badges417 silver badges523 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

its4zahoor Over a year ago

Is prevState a built-in function or a reserved keyword?

Stuart Casarotto · Accepted Answer · 2018-04-22 18:57:53Z

1

Your set state is resetting the whole post object. You likely want to do something like:

this.setState({
    post: {
        ...this.state.post
        [name]: value
    }
})

answered Apr 22, 2018 at 18:57

Stuart Casarotto

1,1879 silver badges16 bronze badges

Comments

Klian · Accepted Answer · 2018-04-22 18:58:25Z

0

Solved using spread operator, this is the updated handleChange function that works with nested property:

handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        var post = {...this.state.post}
        post[name] = value;
        this.setState({post});
    }

answered Apr 22, 2018 at 18:58

Klian

1,5845 gold badges22 silver badges34 bronze badges

Collectives™ on Stack Overflow

Warning when changing controlled input value in React

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related