‫Okay, and so now,
‫let's use the render props pattern
‫to solve the problem that we identified earlier.
‫So the render prop pattern is all
‫about passing in a prop called render,
‫which is a function that a component uses
‫to know what it should render and how to do it.
‫So essentially, whenever you can't directly pass
‫in JSX with the children prop
‫because you need to give the component a description
‫on how to render something,
‫then you need to reach for this render props pattern.
‫But that still sounds a bit confusing
‫and so let's just do it.
‫So as I was saying, here, now we will pass
‫in a prop called render, which will be a function.
‫And what will this function be?
‫Well, again, it will be the instructions
‫of how to render something.
‫And in this case, that's actually pretty simple.
‫So for our list of products, we know that for each product
‫we want to render this product item component, right.
‫So this is what we want to render
‫and here is how we want to do that.
‫So again, for each product,
‫we want to render one product item.
‫And so, let's grab this entire function,
‫which is indeed a function, right.
‫So we grab that and place that here in the render prop.
‫And so then here, of course, we need to receive that prop.
‫So besides the title and the items,
‫we now want this prop called render.
‫And so then here we place that,
‫and there we go.
‫So now our list works exactly the same way as before
‫but we basically inverted the control of how
‫it should render to the user of the component.
‫So this is what we call inversion of control
‫and it's an important principle
‫in software development in general.
‫So again, this list now no longer knows actually
‫what it is rendering, right.
‫It has no idea what will happen here
‫inside this map function for each of the display items.
‫All that it knows is that it received dysfunction
‫and that it will call dysfunction
‫for each items in the array.
‫That's it.
‫And so now that this component doesn't know anymore
‫what it is actually rendering,
‫and it doesn't even care about what it is rendering,
‫well, it then makes that very easy to reuse the component
‫for other render props, right.
‫So now we can just grab this list right here
‫and we can reuse it for something else.
‫And in particular for our companies.
‫So here, let's call them companies.
‫And then for each company
‫what we want to render this time is a company item, right.
‫And then here as the key, we pass in company dot.
‫Well, what do we have there?
‫So probably we have a company name, right.
‫And then here,
‫this company item does not receive the product
‫but of course instead a company.
‫So company and then company.
‫And on top of that, it does even receive some other prop.
‫So we can also pass in the default visibility.
‫So let's set that to false just to show how different
‫these two lists actually are.
‫So here I want false not face.
‫And they should of course not be a string
‫but really a (indistinct).
‫Now, right.
‫And so watch the result that we got.
‫So all the logic that we had here before
‫about collapsing the list is the same
‫in these two lists now, so we can collapse both of them.
‫And of course, we also have this button down here.
‫So then only three of them are being shown.
‫So essentially we achieved our goal of reusing all
‫of this (indistinct) logic and also the UI itself.
‫So basically this title here, this button that we have
‫and yeah, also that other button down there.
‫So we were able to share all of that
‫among these two lists here,
‫simply by passing in the render prop again.
‫And so therefore, with this, this list no longer cares
‫about what it is rendering
‫and simply follows the instructions right here.
‫And so those instructions in this case are simply
‫what should happen for each of the items
‫in the company's array.
‫So next, in this case here, that for each company
‫one company item should be rendered with these three props.
‫While here, one product item component should be rendered
‫with these two props.
‫And so again, fundamentally different what we're doing here
‫and what we're doing here,
‫but the important part is that we couldn't only have passed
‫in this component right here,
‫because then our list component wouldn't have any idea
‫about what to do with it.
‫So it wouldn't even know what this company here is
‫if it wasn't for this function right here.
‫So the render prop really always needs
‫to be a function similar to this one.
‫Now, okay, so I hope this made sense and
‫that you understood the logic behind what we just did here.
‫Now, just notice that the render prop
‫used to be really the main way
‫of sharing (indistinct) logic across multiple components.
‫So that was before we had React hooks,
‫but now that we do have them, the render props is not
‫that used anymore except for situations like this one
‫and also a few other even more complex situations.
‫So that's why here I'm not gonna go really deep
‫into the details
‫and also really compare all the different patterns.
‫Again, because custom hooks are now usually
‫the way to go when we want to share logic.
‫But that actually doesn't stop us
‫from looking at yet another pattern in the next lecture,
‫which is called the higher order component pattern,
‫which is even less used, but still very important
‫for you to know.
‫Even though I didn't even include it
‫in that initial slide at the beginning of the section.
‫But anyway, let's now move there
‫and check out this other pattern.