 Hello again, I'm Chanatastic, you're great. And this is React Holiday Day 11. We have a lot to cover, so I'm gonna jump right in. I wanna talk about passing a component as props to another component. So to do that, I'm gonna take what we did yesterday and put that inside of a component called Pokemon List. We're gonna pass collection.results as items and here is the implementation. As soon as I uncomment that, you'll see that we have the same result as yesterday. Now we have a problem that we've introduced in that now this is always gonna be an unordered list and it's locked away behind this component. I'd like to make that whatever I want. So here we can pass in a component and say we want this to be an ordered list. So still render the list items, but make it an ordered list. Now because we're getting component on props now, we can use property access to do props.component. Change that in both places. And voila, we have an ordered list. Now there's a little bit of a problem because we're spreading out all of these other attributes on it. We're gonna also see components equal OL as an attribute on this and that's not what we want. So we can destructure component off and use that instead. So take off our property access here, but now we've created a new problem. You see that these become unordered again and it's trying to use this component host element and that's because of JSX assuming that if it's a lower case, it's a host element and if it's uppercase, then it's a component. So we're going to change this, change that to as save and all of our problems are solved. This is exactly what we want. Now by convention, a lot of people use as here. So this is the as prop. We want our component to render as an ordered list. So that's it. Now you know how to pass components as props and make your root elements dynamic.