mercredi 13 octobre 2021

Checking one checkbox is checking all other checkboxes

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