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>
)
}
Source: stackoverflow.com
Related Query
- What if there is no opportunity to create unique keys?
- How to create unique keys for React elements?
- How does a GraphQL mutation know what node it's modifying? Is there a unique and global node ID for each node in the database?
- Understanding unique keys for array children in React.js
- What is the difference between NextJs and Create React App
- When giving unique keys to components, is it okay to use Math.random() for generating those keys?
- What Does Eject do in Create React App?
- What is the significance of keys in ReactJS?
- How can I add unique keys to React/MUI Autocomplete component?
- What is the best way to create a single MobX store for an app?
- Warning: flattenChildren(...): Encountered two children with the same key / Child keys must be unique
- ReactJS : What is the best way to give keys in array element
- Javascript: What is eslintcache file and why is always generated in create react app
- How to create unique key for NavigationStateUtils using push route in React Native/Redux?
- What is the best way to secure Firebase API keys in a react app so it is not accessible publicly?
- What is the best way to create text input Redux
- What does "type" mean and is there is a special use for a question mark in ECMA 6?
- What is the true place/way to save api keys in react app?
- How to resolve unique keys required error when using <MemoryRouter /> in a test
- Is there any way to create dynamic slugs with Gatsby using a template component / page?
- What is the best way to create parameter of the component in React?
- React Components - What is the proper way to create them?
- Is there a way that I can create a custom column with auto numbering in material-table?
- What to pass to super when there are no props?
- Is there a way to create a <style> object with React?
- Which places and for what elements do we have to provide a unique key?
- Is there a way to create a button with a linear progress within it, using material-ui?
- React: Unique keys and optimistic updating
- react create app, typescript unit test with mocha and chai what is the correct setup to support es6 modules?
- How do I create an array of unique field values in React with data from Firestore?
More Query from same tag
- How to close semantic ui modal in another react component?
- Re-rendering of connect()ed component based on mapStateToProps output
- fetch data in react returns {}
- React: Passing local state to parent component
- Jest Unexpected identifier: React
- react-redux Component failing to load at the first API call
- unsure why state is changing
- How to refresh page after deleting item in React?
- Can't find package.json with custom cra-template
- setting this.state in react leaf component when using redux, anti-pattern? benefits / disadvantages
- Has anyone been successful in implementing google optimize in a SPA React App?
- Why is my Swiper render buggy at the first time render using React
- How to validate react prop that should accept Component
- is missing in props validation?
- React Countdown Timer not working correctly
- How to use TransitionComponent in React-Bootstrap
- Error: Cannot find module - webpack-dev-server.js
- while this.state is a Javascript object , why is state null even after passing into it a state that has data?
- max-width with absolute positioning
- CSS min-height not working in firefox
- Trigger modal from dropdown menu click event antd
- How to set defaultParams with a recompose, lifecycle HOC?
- react material-ui textfield getting error: invalid hook call
- What is the difference between these two declarations in react javascript?
- Memoize API response using useCallback hook
- Can I use PropTypes to express that a prop is a Promise?
- React-router-dom link route to target page after refresh
- how to load content of a file to third part editor ex:(Wysiwyg editor)
- How to deploy React application to Heroku
- Expose model data in component