react Input checkbox does does not reflect provided value


Topic: react Input checkbox does does not reflect provided value

uhligjens pro asked 7 years ago

Hi all, I try to use a simple checkbox in a master detail szenario with mdb react as controlled component. Unfortunately the checkbox does not refelct the provided value. Any ideas? Thx <Input label="CheclboxLabel" type="checkbox" id="boxid" value={this.state.selectedBool ? this.state.selectedBool.toString() : "false"} onChange={e=>this.handleChange(e.target.checked, "checkbox")} filled />

Jakub Strebeyko staff answered 7 years ago

Hi there uhligjens, Welcome to the Support Board! I am gonna ask you for some more details about the use case, but before that I want to make sure I understand the issue thoroughly: the <Input type="checkbox"> is being rendered as a controlled component and while it is working visually (meaning clicking it has the box checked or not), when being rendered with value attribute evaluated to true>, the box still gets initially rendered as false and therefore clicking it is opposite to the value passed? If that is the case, please make sure you also pass the checked attribute along with the component, for example checked={this.state.selectedBool}. We will definitely have it simplified in the next release cycle. If what I described above is not what you meant, please describe "not reflecting" Input's behavior is some more detail. With Best Regards, Kuba

uhligjens pro answered 7 years ago

Thanks Jakub, your post guided me to the solution. The last issue was to set a proper id. I does not work without. To sum it up: In order to use checkboxes properly I need to set the value, checked and id attribute.   Thx, Jens BTW: The InputSwitch does not implement the componentWillReceiveProps(nextProps)  function and therefore will also not reflect updated from a parent component. Here is my workaround
componentWillReceiveProps(nextProps) {
// update innerValue when new value is received to handle programmatic
// changes to input box
if ('checked'innextProps) this.setState({ value:nextProps.checked });
}

Jakub Strebeyko staff answered 7 years ago

Hi there Jens, Thanks for reaching out with all that - special attention will be payed to simplify usage and have the docs reflect this during the next MDB React update cycle. On the side note, we are not using componentWillReceiveProps, as it is considered legacy. Best, Kuba
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No