![]() It compares those React elements with the new React elements that you just returned at this time. The way React updates the DOM is it has a reference to the JSX elements that you gave it the last time it rendered this app component. We're going to hand that off to React so that it can update the DOM appropriately. We're going to iterate over this list of items, which now has one less item than it had before. We're going to create these React elements. This call to setItems is going to trigger a re-render of our app. That sets the items to the same list of items that we had before, except we're filtering out the item that you were trying to remove. When we click on removeItem, for example, if we try to remove the grape, then that goes into this code right here, which calls setItems. If you consider what happens when we click this remove button or this add button, then this strange behavior will make sense. This is the bug that the key prop helps you to avoid. If I remove from the middle here, now we have pear is associated to orange. If I remove from the beginning, now we're having orange being associated to the apple. If I click on remove here and remove and remove and remove, everything works out just fine. As I removed them, if you watched carefully, you might have noticed an interesting bug. Here, we have a list of each one of these items, where the item itself is the label and then the default value for the input is the item as well. That's why we have this contrived example for me to show you. I like to understand why that warning is there in the first place. I'm not a huge fan of changing my code just to make warnings go away. If we save this, we don't get that warning anymore. We're going to use that id as the key prop. Each one of those items has an id that uniquely identifies the item. We look at the items that we're iterating over. We're seeing this warning because we don't. That's the case where you need to have a key prop for every React element in the array. Specifically, in our case, these are elements. What we're doing is we're taking an array of strings, we're mapping over that array of strings, and turning that array of strings into an array of React elements. ![]() There's nothing really magic going on here. What that's talking about is any time you render an array of React elements, in our case we're rendering these s, each one of those React elements must have a key prop associated with it so that React can track these appropriately over time. When we render this, we're going to get this waning that says, "Each child in a list should have a unique 'key' prop." Here we have remove buttons for each one of these, then the item name itself, and an input with that item in it. We have a fixed set of items that can be added or removed, and we have a button to add additional items, which is disabled when we've added all of our items, and then we iterate over the items that we have and render a list item for each of those. Dodds: Here we have an app that's managing some items.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |