Unnecessary deleting elements from dom without making an action on this elements - reactjs

Question

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const CreateCriteria = () => {
const [criteria, setCriteria] = useState({})
const onClose = useCallback((key) => {
delete criteria[key]
setCriteria(criteria)
}, [criteria])
const onClick = useCallback(() =>{
const key = Math.random()
setCriteria({
...criteria,
[key]: <div onClick={() => onClose(key)}>{
key
}</div>
})
}, [criteria, onClose])
return (
<div>
{
Object.keys(criteria).map((entity) => criteria[entity])
}
<button onClick={onClick}>
add
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<CreateCriteria />, rootElement);
Imagine that I have this snippet of code. When I click on add button I want to get new elements in the DOM and in the criteria object. I do it by generating new par ( key/value ) in criteria object and then parse this new data in DOM. I do it because I want also to have the opportunity to delete this object from dom by clicking on this object. When I click on elements from last to first ( from below to above), then it works fine, but for example, if I have 3 elements 1,2,3 and I click on 2, then it also delete 3, and I can't find out why does this happen. You can use CodeSandbox for checking it :
https://codesandbox.io

Answer 1

You did two errors
You assidetially created closure when adding new keys in creteria object. This code
[key]: <div onClick={() => onClose(key)}>{
key
}</div>
not only adds <div> element to creteria object but create closure with function onClose. onClose in its turn create includes in closure creteria object as it is in time of adding new key in creteria object. So when onClose called, it has only keys that was there when new key added. So you see strange behaviour.
To solve problem I suggest to store only keys in creteria object and encapsulate them in <div> during render.
Another problem pointed in comments. You should create new creteria object in onClose. Otherwise React will not update creterai as it only compares new and old state using Object.is
To solve this, use destruct operator to create new copy of creteria object like this
const onClose = useCallback((key) => {
let newCreteria = { ...criteria };
delete newCreteria[key];
setCriteria(newCreteria);
}, [criteria])
Also useCallback is useless. But code works with them in palce.
Working sample is here

Answer 2

const CreateCriteria = () => {
const [criteria, setCriteria] = useState({});
const deleteCriteria = useCallback(
key => {
const newCreteria = { ...criteria };
delete newCreteria[key];
setCriteria(newCreteria);
},
[criteria]
);
const onClick = useCallback(() => {
const key = Math.random();
setCriteria({
...criteria,
[key]: null
});
}, [criteria]);
const CriteriaList = useMemo(() => (
Object.keys(criteria).map(entity => (
<div key={entity} onClick={() => deleteCriteria(entity)}>
{entity}
</div>
))
), [criteria, deleteCriteria])
return (
<div>
{CriteriaList}
<button
onClick={onClick}
>
add
</button>
</div>
);
};