Missing object when catching values in array Reactjs

Erik Nguyen 0
Viewed 33
 const [keyNo, setKeyNo] = useState(0);


const { useAppDispatch } = useReduxApp();
  const dispatch = useAppDispatch();

  const [tabs, setTabs] = useState<TabItem[]>(initialTabs);
  const newCase = {
    key: String(keyNo),
    title: (
      <div style={{ color: 'red' }}>
        New Case {keyNo}
        <div className={s.btnCloseTab} onClick={() => delCase(keyNo)}>
          <i className="bi bi-x-circle-fill"></i>
        </div>
      </div>
    ),
    children: <CreateForm keyNo={keyNo} />,
  };
  const addCase = () => {
    setKeyNo((prev) => prev + 1);
    const newTabs = [...tabs, newCase];
    setTabs(newTabs);
  };

  const delCase = (id) => {
    console.log(id);
    console.log(tabs);
  };

enter image description here

i just have 6 objects when i click on the X button , missing the object with "key 5" (New Case 5), i dont know what's wrong, please help me

frontend object reactjs arrays javascript
2 Answers

Try with updater function,

const addCase = () => {
    setKeyNo((prev) => prev + 1);
    setTabs(currentTabs => currentTabs.concat(new case));   };
TimoDevs0

As you can see in your console.log. You have 6 object with keys : "myWork","0","1","2","3","4". So there really is no item with key "5", you are missing it or there is something wrong with your logic depending on what you want to do. For example mby you are taking indexes[1,2,3,4,5] instead of [0,1,2,3,4]

Vojin Purić0
Related