score:1
Accepted answer
you have two options here:
- the suggested way is to generate a unique key when adding a new
todo
like this:
const todo = {
id: new date().gettime(), //a better way might be to use a uuid library to generate this
title: title,
finished: false,
};
- is to use
index
+title
as key just to make react happy, like this:
const mappedtodolist = todolist?.map((element, index) => {
return (
<div classname='to-do' key={element.title + index}>
<p>{element.title}</p>
</div>
)
})
score:-1
you can map over the list like this:
const numbers = [1, 2, 3, 4, 5];
const listitems = numbers.map((number) =>
<li>{number}</li>
);
score:0
you can use uuid library
npm install uuid
then you can add a unique id for your item
import { v4 as uuidv4 } from 'uuid';
const todo = {
id: uuidv4(),
title: title,
finished: false,
}
Source: stackoverflow.com
Related Query
- What to use as key when rendering a list of elements in react if the objects have no property which can be used as an unique identifier?
- React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
- Can I use React.Fragment for list rendering while have the "key" assigned?
- What is the best way to use a list as a key in JavaScript?
- How to update a useState which has an array, inside this array I have objects this objects will update when the input value will change in react js
- my page is not rendering with different id on the same page when i use link in react components
- I have a Modal in React that is showing when first rendering the App
- What is the best way to define "KEY" in React when creating a list with map function from an array which containing no unique ID or fields?
- Rendering a list in React doesn't populate any elements to the DOM
- How to increment the old array list key 5 times dynamically when I press the button using React Js?
- React Each child in a list should have a unique "key" prop. even if the key is present
- I'm rendering a react class Some elements seem to have a problem with closing tags but i made sure there's no unclosed tags in between what can i do?
- What React hook to use to make it re-render the list each time function is called?
- Can conditional rendering in React use logical operator || when rendering the same content?
- React + Redux - Input onChange is very slow when typing in when the input have a value from the state
- Most efficient way of rendering JSX elements when iterating on array of data in React
- What is the necessity of "export default connect" when you are connecting your react component to redux store
- How to use React links when rendering content with dangerouslySetInnerHtml?
- What is the proper way to use React Memo with Flow?
- React memo keeps rendering when props have not changed
- The price of rendering elements using D3 in a React application?
- Why do I have to list my peerDependencies as externals in the webpack config when creating a package?
- What are the scenarios one should use isRequired for PropType vs defaultProps in React Application
- What happens when we use usestate without any parameters (in React hooks)?
- Can I use the React Context API inside a Context API or do I have to merge them?
- Jest enzyme shallow test is not rendering all elements of the React component
- How to use React.FC<props> type when the children can either be a React node or a function
- How to distinguish what caused rendering of React component: something from the inside or from the outside of the component?
- List elements not rendering in React
- What is the right way to use new React hook useContext?
More Query from same tag
- How to change the size of material table in react?
- use es6promise to make remote call sequentially
- create personal collections for logged in users
- react state is not updating in jest
- Clear Radio buttons on Submit without getting errors
- when i use intersection types in tsx , it's broken. how to resolve
- How to retrieve an array of object property in fetch and then pass it down to the second fetch call?
- react router passing variable/state to new route?
- how to pass item from list in state to child component?
- How to concatenate two JSX fragment or variables or string and component (in Reactjs)?
- React testing library - cannot read property 'prototype' of undefined while mocking named class component import
- React input onChange did'nt fire on same value
- setInterval calling two async functions conditionally
- Using the paypalhere sdk in react web app
- How to fix Do not mutate state directly. Use setState() with array?
- Can't Reset a Simple Radio Button - React JS
- How to make a function that bounces between two values on tick?
- Error while using Accordian in React-bootstrap
- TypeError: Cannot destructure property 'name' of 'props.todo' as it is undefined. React
- VS Code beautify break tags in react html
- React + TypeScript error: No overload matches this call
- SPA with Deepstream.io HTTP authentication for a login page
- Input mask doesn't work when value is deleted
- Axios Api calls in Heroku
- ReactJS- remove HTTP header before redirect
- HTML special character (& symbol) not rendering in React component
- Bootstrap 4 - form element not using full width
- How to properly setup axios client with Typescript?
- React - remove event listener (onmousedown -> onmousemove)
- React, MongoDB, Mongoose: How to format my date to be readable?