score:1

Accepted answer

to make minimum changes in your code - just never delete the item in deleteelem, but add a flag deleted to it instead.

when render an item, show <fragment> for the deleted item.

score:3

with deepcopy you can add a unique id to each item when you initialize your state. once you do that you can leverage that id for passing as key to the input element

import {uuid} from 'uuidv4';
function deepcopyandaddid = () => {
   let newdata = deepcopy(data);
   newdata = newdata.map((item, index) => ({...item, id: uuid()})); 
}
function app() {
  const [maindata, setmaindata] = usestate(deepcopyandaddid);

  return (
    <react.fragment>
      {
        maindata.map((item, i) => {
          return (
            <input {...item} key={item.id} num={i} setmaindata={setmaindata}/>
          )
        })
      }
    </react.fragment>
  )
}

Related Query

More Query from same tag