react Input checkbox does does not reflect provided value

MDB SupportCategory: MDB Reactreact Input checkbox does does not reflect provided value
uhligjens Pro UserPremium asked 2 months ago in MDB pro, version:4.4.0

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
/>

3 Answers
Jakub Strebeyko answered 2 months 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 UserPremium answered 2 months 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 answered 2 months 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