Checking one checkbox is checking all other checkboxes-CodePudding

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>
)

CodePudding user response：

This is happening because you are keeping one variable isChecked for the entire component. To make it unique to each data, keep this as an array:

const rowState = {
    data: [],
    checkedData: [],
    loading: false
}

Then, you should update the checkedData array accordingly. Check state will receive an id or an index and remove from checkedData if it is present in checkecData or add to checkedData if it is not present.

An example:

checkedData.includes(index) ? checkedData.filter((d,i) => i !== index) : [...checkedData, index]

CodePudding user response：

Each checkbox should need an index, and the state should keep track of which checkbox that is checked or not.

import { useSelector, Provider, useDispatch } from "react-redux";
import { createAction, createReducer, configureStore } from "@reduxjs/toolkit";

const initialState = { checkboxes: [false, false, false] };

const index = createAction("toggle/index");
const toggleReducer = createReducer(initialState, (builder) => {
  builder.addCase(index, (state, action) => {
    state.checkboxes[action.payload] = !state.checkboxes[action.payload];
  });
});

const store = configureStore({ reducer: toggleReducer });

const toggleIndex = (index) => {
  return {
    type: "toggle/index",
    payload: index,
  };
};

export const Checkbox = ({ index }) => {
  const dispatch = useDispatch();

  const handleCheckBox = () => {
    dispatch(toggleIndex(index));
  };

  const isChecked = useSelector(({ checkboxes }) => checkboxes[index]);

  return (
    <input type="checkbox" checked={isChecked} onChange={handleCheckBox} />
  );
};

const App = () => {
  return (
    <Provider store={store}>
      <div>
        <Checkbox index={0} />
        <Checkbox index={1} />
        <Checkbox index={2} />
      </div>
    </Provider>
  );
};

export default App;