const data ={
 users:[
  {id:1,name:'vasya'},
 {id:2, name:'petya'}
]
}
cosnt userCard = ({id, name})=>(`
   <div class='user'>
      <h2>${name}</h2>
     <button class='del-btn' data-id='${id}'>del</button>
     <button class='upd-btn' data-id='${id}'>update</button>
</div>
const render = () => gridContainer.innerHtml=data.users.map(userCard).join('')
`)
const findUser = id => data.users.find(u=>u.id === id)
cosnt delUser = user => data.users = [...data.users].filter(u=>u.id!==user.id);
const updateUser = user => data.users = [...data.users].map(u=>u.id === user.id ? user: u)
gridContainer.addEventListener('click', e => {
 if(e.target.matches('.btn-del')){
  const id = e.target.dataset.id   
  const user = findUser(+id)
  delUser(user) 
 }
})
(async ()=>{
  render()
})()