Reactstrap: Warning: Input is changing a controlled input of type text to be uncontrolled........

Created on 6 Aug 2017  ·  3Comments  ·  Source: reactstrap/reactstrap

Currect way to implement the Input type checkbox component

Issue description

Hi everyone, i just want to give you thanks for this approach you all made with this library. I have been having some trouble to implement the reacstrap input type checkbox component, i do not know if i'm doing something wrong in the implementation, but the browser is displaying me an error when i set a state to get the input checked value.

  • react#15.6.1
  • reactstrap #4.8.0
  • components: <Input type="checkbox" />

Steps to reproduce issue

  • Implement Input type checkbox
  • Set state to checked property

Error

Warning: Input 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

I read about the using of uncontrolled component and controlled component. I tried to use the ref property, but I still do not find the way to solve this. I'll appreciate any help you can give me. Thanks

This is a link with the react component class code

gist code link

picture clenondavis
😕1

Most helpful comment

The issue is not with reactstrap but with the way you are managing the state which populates the values of the inputs.

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

When this code runs, it replaces this.state.todo with the new object you provide. This new object ends up having only 1 property. For example, when you check the checkbox, you are removing the title value. Also when you change the title, you are removing completed value.
When you remove the value, it becomes undefined and when an input value (or checkbox's checked) changes from a value to undefined it triggers this error. Also when it changes from undefined to a value, the same thing happens.

To fix this you need to spread the existing values in the new todo you are creating, only overriding the one you want to change.

this.setState({ todo: { ...this.state.todo, [name]: value } });

Demo: https://www.webpackbin.com/bins/-KqsH3Gto_LZBWEUvRj0

picture TheSharpieOne on 6 Aug 2017
👍37 ❤5 🎉3 👀1

All 3 comments

The issue is not with reactstrap but with the way you are managing the state which populates the values of the inputs.

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

When this code runs, it replaces this.state.todo with the new object you provide. This new object ends up having only 1 property. For example, when you check the checkbox, you are removing the title value. Also when you change the title, you are removing completed value.
When you remove the value, it becomes undefined and when an input value (or checkbox's checked) changes from a value to undefined it triggers this error. Also when it changes from undefined to a value, the same thing happens.

To fix this you need to spread the existing values in the new todo you are creating, only overriding the one you want to change.

this.setState({ todo: { ...this.state.todo, [name]: value } });

Demo: https://www.webpackbin.com/bins/-KqsH3Gto_LZBWEUvRj0

TheSharpieOne picture TheSharpieOne on 6 Aug 2017
👍37 ❤5 🎉3 👀1

@TheSharpieOne thanks for your help.

clenondavis picture clenondavis on 17 Aug 2017

Your welcome.
I am going to go ahead and close this since it looks like the issue has been resolved. Feel free to reopen or comment if you believe the issue has not been resolved.

TheSharpieOne picture TheSharpieOne on 17 Aug 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

rlambrecht picture rlambrecht  ·  3Comments
gthomas-appfolio picture gthomas-appfolio  ·  3Comments
ridhwaans picture ridhwaans  ·  3Comments
ethanharlig picture ethanharlig  ·  3Comments
achtan picture achtan  ·  3Comments