Hi I am using Blockui for stop interacting user from the datatable when user click the check box. i checked the data from database and decide whether need to check or uncheck the checkbox . it take some time to interact with DB for that purpose i am using block ui . but the problem is for example initially first row and second row checkbox is unchecked , when user clicks first row , it checked the checkbox , after that if user click second row check box , it uncheck the first row and check the second row check box. It is happening only when i am using block ui. Can you please help me on this. Posted only the required code.
{
name: 'Verified',
label: 'Verified',
options: {
filter: false,
sort: true,
display: true,
customBodyRender: (value, tableMeta, updateValue) => {
console.log(value);
return (
<Checkbox
value={value}
checked={value}
{
onChange={(event) => {
handleValidate(event, value, tableMeta, updateValue)
}}
/>
)
}
}
const handleValidate = (event, one, two, three) => {
this.setState({blocking:true}) //if i remove the code , it working as expected
event.preventDefault()
let id = two.rowData[0]
let isVerified = !one
console.log(isVerified);
fetch(`${projectVerify}/${id}`, {
method: 'POST',
credentials: areWeDev ? 'omit' : 'include',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
isVerified: isVerified ? 1 : 0
})
})
.then((res) => {
return res.json()
})
.then((res) => {
if (res.ack && res.ack === true) {
if(res.id.isVerified==1)
{
this.setState({blocking:false}) //if i remove the code , it working as expected
three(true);
}
else{
this.setState({blocking:false}) //if i remove the code , it working as expected
three(false);
}
}
}
)
.catch((e) => {
this.setState({blocking:false})
console.warn('Error sending data', e)
})
}
<>
<BlockUi blocking={this.state.blocking} message={this.state.message} keepInView >
<DataTable columns={returnColumns()} title={title} options={options} data={data} />
</BlockUi>