Way to determine checkbox checked in react (useState)

This is my first time to develop a react application. I tried to implement checkboxes in each row of a table and check which of the rows are selected.

I used useState hook to make checked and onChange events, but seems the values are not refreshing when I check then uncheck the checkbox.

I would like to ask how to add a logic to remove the unticked values on the hooks.

T1
Checkbox A- Checked
Checkbox B- Checked
CheckedMap- A,B

T2
Checkbox B- Unchecked
CheckedMap- A,B // Unticked Checkbox B is also stored in CheckedMap

Thank you for your help.

export default function({ infinite }) {
  const [checkedMap, setCheckedMap] = useState(new Map());
}

const handleCheckedChange = transaction_seq => {
    let modifiedMap = checkedMap;
    modifiedMap.set(transaction_seq, !checkedMap.get(transaction_seq));
    setCheckedMap(modifiedMap);
  };

const columns = [
    {
      Header: "Transaction(s)",
      className: "left",
      columns: [
        {
          id: "checkbox",
          accessor: "checkbox",
          Cell: ({ row }) => {
            return (
              <input
                type="checkbox"
                className="checkbox"
                checked={checkedMap.get(row.original.transaction_seq)}
                onChange={() =>
                  handleCheckedChange(row.original.transaction_seq)
                }

63 thoughts on “Way to determine checkbox checked in react (useState)”

  1. Pingback: rakyta acyclovir
  2. First of all I would like to say great blog!
    I had a quick question which I’d like to ask
    if you do not mind. I was curious to know how you center yourself
    and clear your thoughts prior to writing. I have had a tough time clearing my thoughts in getting my ideas out.
    I truly do enjoy writing but it just seems like the first 10 to 15
    minutes tend to be wasted simply just trying to
    figure out how to begin. Any recommendations or hints?
    Kudos! https://tadalafili.com/

    Reply

Leave a Comment