00:00 In this exercise, we're going to look at Render Props. Render Props are an extremely useful tool in React, and they used to be very, very, very common, especially before hooks came in, because they were kind of the only way that you could package reusable functionality and kind of use it all around your application. But they're still pretty useful now,

00:18 and they're often used by third-party libraries, and you'll sometimes find yourself in a situation where only Render Props are the correct solution. Here we have a modal, and this modal is basically like, it's kind of got some reusable functionality packaged inside it. It's got some isOpen and setIsOpen states inside it.

00:37 And what we're doing here is we're basically calling children manually, and then passing it isOpen, openModal, and closeModal. Then with the rest of the component, we're creating a portal to this modal. So kind of just packaging, like this is just a demonstration to show you what passing reusable functionality looks like. And this looks weird kind of like

00:57 internally inside the modal, but then you actually look at the usage, and the usage is as a child, we pass in something to the, passing a function to the children, and then that gets passed the props as an argument. And so what we're expecting here, and this isn't currently working,

01:17 is we're expecting the props to be equal to modal child props, which are defined up here. And your job is to work out a way that we can type children strongly so that it actually works for us, and we get this API. This isn't necessarily everything render props can be, but passing them as children is kind of quite idiomatic.

01:36 And I'll show you some kind of like alternative APIs as well when we get there.