Bug: checkboxes with check all checkbox

[johnmangam]

Checkall/uncheckall checkbox works but upon clicking the individual checkboxes the behavior isn't as expected

Code:

Grid.cs

Import React,{useContext, useEffect, useState} from ‘react’
Import {row,Col,Button} from ‘react-bootstrap’
Import BootstrapTable from ‘react-bootstrap-tab;e-overlay’

const GridView =({
Data,
openCheckAllModal
})
const[modifiedData, setModifiedData] = useState([])
const[checkAll,setCheckAll] = useState(false)
const isMounted = useIsMounted()

useEffect(() => {
if(isMounted){
data.forEach(async(s) =>{
s.isSelected = false
})
setModifiedData(data)
}
})

const selectColumn =(cell, row) => {
Return(
<>
{updatedData.filter(e=> e.id == row.id)[0] &&  <input type = “checkbox”
Id = {“chkbx”+row.id}
checked ={modifiedData.filter(e => e.id == row.id)[0].isSelected}
onChange = {€ => handleSelectChange(e,row)}

/>
</>
)
}

const handleSelectChange =(e,row) =>{
var updatedModifiedData = modifiedData
updatedModifiedData.forEach((s) => {if(s.id == row.id){
s.isSelected = e.target.checked
)
})
setModifiedData(updatedModifiedData)

var checkAllVal = modifiedData.filter(s=> s.isSelected == false).length == 0?true:false
setCheckAll(checkAllVal)
}

const handleCheckAllChange = (e) =>{
var updatedValue = modifiedData
updatedValue.forEach((s) => {
s.isSelected = e.target.checked
})
setModifiedData(updatedValue)
setCheckAll(e.target.checked)

}

const columns = [
{   
    columns.push({
        dataField: ‘isSelected’,
text: ‘Select’,
sort: false,
headerformatter: headerFormat,
formatter: selectColumn,
headerStyle: {textAlign: ‘center’},
style: {textAlign: ‘center’, verticalAlign:’middle’},
})
]

Return(
<>
<Row className=’align-self-center SectionHeader’>
<Col className=’mx-2’ type= “checkbox”
Id=’checkAll_Chkbox1’
checked={checkAll}
onChange={ handleCheckAllChange }
/>Check All 
</Col>
</Row>

<BootstrapTable
Bootstrap4
keyField=’id’
data={modifiedData}
columns={columns}
/>
</>
)

The current behavior

Checkall/uncheckall checkbox works but upon clicking the individual checkboxes the behavior isn't as expected

The expected behavior

Individual checkboxes should be checked upon clicking it

[gaearon]

Sorry, it's very hard to read unformatted code, it's not runnable (you have not provided a sandbox), and it's not clear what doesn't work because you haven't specified what the expected behavior is. Please use StackOverflow for questions about using React. If you think you found a bug in React, please provide a runnable example.

[Baribj]

As @gaearon mentioned, its quite hard to read this code because its unformatted and incomplete.

At any rate, what is this supposed to do exactly ?

useEffect(() => {
if(isMounted){
data.forEach(async(s) =>{
s.isSelected = false
})
setModifiedData(data)
}
})

There are multiple things that are wrong with this code:

1- you don't have a decaled array variable called "data" in the code, but you are still doing data.forEachyou are are receiving a prob that's called Datawith capital D.

2- Your useEffectruns with every re-render, something I doubt you want to happen.

3- You are setting state with every re-render, which doesn't make any sense. You are also setting state with "data", which is again, no where to be found in your code.