‫So to learn about the render props pattern
‫let's start by setting up an example on Code Sandbox.
‫So here is the URL for this code sandbox
‫that we're going to work with over the next few lectures.
‫And of course, I will include this URL
‫in the resources of this lecture.
‫So the small demo app that we have here is
‫for now simply this one list here.
‫So we have basically a list
‫of products which we can collapse here.
‫Then we also have another button down here
‫which is basically to show less.
‫And so then it only shows three of the products.
‫And then of course when we click again
‫it then shows all of them again.
‫So here in our code
‫we are generating those products here randomly
‫using this faker JS library.
‫And then I'm also generating here some fake companies.
‫But here you can see that we're actually not using them.
‫Then we have this product item component
‫which is basically each of these items here.
‫And then we have something similar
‫for a company item, which again, is also not being used.
‫And then we have the list itself, which we can see
‫down here is simply included in our app component.
‫So we just include this list,
‫pass it a title of products that we see here
‫and then those random products that we generated initially.
‫And then here we have a bunch of logic, which is responsible
‫for doing this collapsing here that we saw
‫and for rendering those items right here as a list.
‫So what I want you to do right now
‫or maybe also after the video is finished, is to check
‫out this entire code on your own and really
‫understand this entire implementation of the list component.
‫Because what we want to do next is to basically
‫reuse this list component also
‫for the list of fake companies.
‫So we basically also want to loop over these companies
‫and for each of them display this company item right here.
‫So for each product render one item, which is
‫of course completely different then the product item.
‫Now the thing is that here in this component
‫we have a bunch of stateful logic
‫which of course we can share using custom hooks.
‫So we could basically create one product list
‫and then one company list, and then have this logic here
‫in a custom hook, and then get that logic
‫into each of these lists using that custom hook.
‫So that would be one solution
‫but then we wouldn't get the corresponding buttons
‫and the way that everything is laid out.
‫So we wouldn't get any of this JSX here.
‫So this button right here.
‫Then this other button.
‫Also the logic here of conditional rendering.
‫And so again, all of this we couldn't really get
‫if we were to share this data logic here
‫simply using React hooks.
‫So here we really want to reuse
‫both the logic and the UI that we have created here
‫for both of these lists.
‫So product lists and company list.
‫So essentially what we want is to just
‫reuse this component that we already have
‫and which contains all the logic
‫and UI that we want to share.
‫But all that we want to be different
‫between the tool lists is this part right here.
‫So for the products
‫we want to render this product item, and for the companies
‫we want to render the company item components.
‫But now the big question is,
‫"How do we actually
‫get these two different components in here
‫so they can be rendered in this unordered list?"
‫Well, one idea would be to use the children prop
‫that we already know.
‫So we could grab this entire UL here
‫and then we could just pass it in like this
‫and you don't need to write this code.
‫So we could then pass it in like this again.
‫But then the problem is that here we couldn't get access
‫to these display items.
‫So these display items are basically the number
‫of items that can be displayed, which are sometimes all
‫of them, but sometimes only the first three.
‫So depending whether we clicked on that purple button
‫that we saw initially at the bottom of the list.
‫So this doesn't really work, except if we wanted to
‫just use all the products.
‫So then maybe we could make this work.
‫But this is really not ideal
‫because ideally we also want to reuse, of course,
‫this unordered list with this class name.
‫So we would not want to have this here once for the products
‫and then again for the companies, right?
‫So we want to reuse all of this.
‫And again, we also want that functionality
‫of the collapsed list.
‫And so the children prop is really not an option
‫because it is quite limited in the fact that it only
‫allows us to really pass in some content.
‫But here, what we need is not to only pass the content in,
‫but also pass in the instructions
‫on how the items should be rendered.
‫And as you can guess,
‫that's where the render props pattern comes into play.
‫And so let's move on to the next lecture
‫and check out how we can solve this problem
‫using the render props pattern.