Removing Item from Array when checkbox is unchecked not working as Expected in react

In my React Table, I have a row with checkboxes. Each time I check any of the boxes, I want to send the Id of that particular item to an empty array and remove from the same array when I uncheck. I tried to get this done but what I have presently is not working as expected. At first click, it returns an empty array but add to the array on second click. To remove from the array also, I need to click twice. Link to codesandbox Codesanboxlink

Here is what I have done so far with it

import "./styles.css";
import { useState } from "react";

export default function App() {
  const Defaultdata = [
    {
      date_listed: "4 hours ago",
      id: "7857699961",
      delivery_time_frame: "2021-10-25 - 2021-11-14",
      distance: "22.8 km",
      time_stamp: "2021-10-25 16:36:54",
      watched: "yes"
    },
    {
      date_listed: "3 days ago",
      id: "8358962006",
      delivery_time_frame: "2021-10-18 - 2021-10-24",
      distance: "4.3 km",

      time_stamp: "2021-10-22 16:54:12"
    },
    {
      date_listed: "4 hours ago",
      id: "8146462294",
      delivery_time_frame: "2021-10-25",
      distance: "4.3 km",
      time_stamp: "2021-10-25 16:12:32"
    }
  ];

  const [newdatatoshow, setnewdatatoshow] = useState([]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <table>
        <thead>
          <th></th>
          <th>Item 1</th>
          <th>Item 2</th>
          <th>Item 3</th>
          <th>Item 4</th>
        </thead>
        <tbody>
          {Defaultdata.map((item, index) => {
            return (
              <tr key={index}>
                <td>
                  {" "}
                  <span
                    onClick={(e) => {
                      setnewdatatoshow([...newdatatoshow, item.id]);
                      if (!e.target.checked) {
                        setnewdatatoshow(newdatatoshow.filter(function(n){ return n !== item.id }))
                        //setnewdatatoshow(newdatatoshow.splice(newdatatoshow.findIndex(data) => data === item.id))

                        
                      }

                      console.log(newdatatoshow);
                    }}
                  >
                    {" "}
                    <input type="checkbox" />{" "}
                  </span>{" "}
                </td>

                <td>{item.id}</td>

                <td>{item.distance}</td>

                <td>{item.date_listed}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}



Answer

Setting value to useState is an asynchronous operation.You need to wait till the value is set.

One way to do this is from an useEffect

  useEffect(() => {
    console.log(newdatatoshow)
  }, [newdatatoshow])