Topic: checked not working. doesnt change state.
Expected behavior not working :
checked={proditem.deliveryTimeId===this.state.deliverTime ? true : false}
Actual behavior
Source
let deliveryTimeTable = [];
response.data.deliveryTimes.map((prod, index) => {
return deliveryTimeTable.push(
<Fragment key={index}>
<span className={classes.subtitles}>{prod.deliveryTitle}</span>
<MDBFormInline key={"frm." + index}>
{prod.deliveryTimeList.map(proditem => {
return <MDBInput
onClick={() => this.deliveryHandler(proditem.deliveryTimeId)}
checked={proditem.deliveryTimeId===this.state.deliverTime ? true : false}
label={proditem.deliveryTitle}
labelClass='mr-5'
type='radio'
id={"delivery." + proditem.deliveryTimeId}
key={"deliveryk." + proditem.deliveryTimeId}
/>
})}
</MDBFormInline>
</Fragment>
);
});
Try something like that:
import React, { Component } from 'react';
import { MDBContainer, MDBInput } from 'mdbreact';
class InputPage extends Component {
state = {
checkbox: true
};
handleCheckboxChange = e => {
const { checkbox } = this.state;
const { checked, value } = e.target;
this.setState({ checkbox: !checkbox });
console.log(`${value} checked? ${checked}`);
};
render() {
const { checkbox } = this.state;
return (
<MDBContainer className='border p-3'>
<MDBInput
value='Classic checkbox'
label='Classic checkbox'
checked={checkbox}
onChange={this.handleCheckboxChange}
type='checkbox'
id='checkbox'
containerClass='my-3'
/>
</MDBContainer>
);
}
}
export default InputPage;
enter code here
Ali Naiemabadi commented 4 years ago
its group radio buttons. so this solution isnt possible.
Piotr Glejzer staff commented 4 years ago
you can change the function to check checkboxes in depending what index is.
Ali Naiemabadi commented 4 years ago
please give sample code. thanks in advanced.
Ali Naiemabadi commented 4 years ago
I am using this function but its not working.
deliveryHandler = (value) => { this.setState({ deliverTime: value }); }
try this
import React, { Component } from 'react';
import { MDBContainer, MDBInput } from 'mdbreact';
class InputPage extends Component {
state = {
checkbox: true,
id: 1
};
handleCheckboxChange = (e, i) => {
const { checkbox } = this.state;
const { checked, value, id } = e.target;
if (Number(id) === i) {
this.setState({ checkbox: !checkbox, id: i });
}
console.log(`${value} checked? ${checked}`);
};
render() {
const testArray = [
{ id: 0, label: 'test1' },
{ id: 1, label: 'test2' },
{ id: 2, label: 'test3' },
{ id: 3, label: 'test4' }
];
const { checkbox, id } = this.state;
return testArray.map((e, i) => {
return (
<MDBContainer key={e + i} className='border p-3'>
<MDBInput
id={i}
value='Classic checkbox'
label={e.label}
checked={id === i ? checkbox : false}
onChange={el => this.handleCheckboxChange(el, i)}
type='checkbox'
containerClass='my-3'
/>
</MDBContainer>
);
});
}
}
export default InputPage;
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.26.1
- Device: Asus
- Browser: chrome
- OS: window 10
- Provided sample code: No
- Provided link: No