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

CodePudding user response：

Try with updater function,

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

CodePudding user response：

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]