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

CodePudding user response：

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

CodePudding user response：

You can't access the updated state from the current state. See useState set method not reflecting change immediately for more info.

What you can do is trigger an effect when a state variable gets updated and print your updated array there

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

For more details check this Array not updating on first click