I have a checkbox component whose state is handled in Redux Toolkit. When checking one checkbox it's checking all other checkboxes in all rows, but I only want to check the checkbox I click on. Here's my code below:
Checkbox Component:
export const Checkbox = (props) => {
const dispatch = useDispatch()
const handleCheckBox = () => {
dispatch(checkboxState)
}
const isChecked = useSelector((state) => (
state.isChecked
))
return (
<input type='checkbox' checked={isChecked} onChange={handleCheckBox}/>
)
}
Slice:
const rowState = {
data: [],
isChecked: false,
loading: false
}
export const rowSlice = createSlice({
name: 'rows',
initialState: rowState,
reducers: {
CHECK_ROWS(state) {
state.isChecked = !state.isChecked
},
})
export const checkboxState = rowSlice.actions.CHECK_ROWS()
Then I'm calling the checkbox component in my page:
const handleRows = (rowData) => {
return (
<tr>
<td>
<Checkbox />
</td>
//rest of the code
</tr>
return(
<Table>
{
dataSource.map((data) => (
handleRows(data)
))
}
</Table>
)
Aucun commentaire:
Enregistrer un commentaire