![]() ![]() If we didn't have a unique id we would need to have an alternative solution. Fortunately we have and id property we can use from our set of data. Often the data we are mapping comes from a fetch request and usually includes an id. To fix this all we have to do is pass a unique key to the element we are returning. foods is just an array of objects and it looks like this □ Here we will have a simple component that deconstructs foods from the prop object. Let's map some data before adding keys to our elements to see the problem in action. Keys should be given to the elements inside the array to give the elements a stable identity Example Problem Keys help React identify which items have changed, are added, or are removed. It should be a unique string which will distinguish it from its siblings that we are also mapping. Essentially it is just a special attribute to which we pass a string. When we do this without adding a key prop React will complain that each element is missing a key. This is often done using the function to pass data from each index of the array to the element or component through props. In React we often find ourselves with lists of data that we want to map into elements or components. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |