 Hey, I'm fantastic. Welcome to react holiday day 14. Today we're going to do another refactoring. At this point, we have a very unopinionated list component. And I want to show you how components can render other components and provide certain opinions at like the right level of abstraction. So what we're going to do is extract a general purpose list component and then move things around so our opinions about Pokemon are in the right place. So generally, because we've done so much work on this component to make it generic, I will just rename this implementation to the generic thing that I want it to be. Now, once I do that, I need to provide the implementation for the Pokemon list component that we had before and our app expects and just kind of map things together. So we're going to return will render our list components. And we're going to pass down all the props that we get down to it. Now, this works automatically. This is a component that doesn't necessarily do anything except give us a new name to render this component as. But let me show you what's next. Now, right here, we have this list item default implementation, but it's very specific to Pokemon. So I'd like to see that moved up. So I'll create a little space here and just kind of move that right up here. Now, because we're destructuring this off, we need to provide that implementation as a prop to this component. So render item equals render item. Pretty easy. Now there's one last step. We are no longer destructuring render item because I actually physically moved it up. So we need to add that back. And boom, everything works. Now the cool thing is that we have this implementation at the right level, just for Pokemon. And then here, you can as an extra credit, figure out what you think would be best or a best meaningful default in the case that you were to use this component directly right now is just going to break. So take a chance and explore