Let's look at nesting components, because when it comes to building applications, you're definitely going to be nesting components. But before we do that, I want to make a slight little change. I want to add the search component to our layout, so that for every page that uses our layout, we will have the search form. That way, we can search regardless of what page we are using. So let's open up the layout page, and let's add that component. It's very simple. All we have to do is use the Livewire search element, just like we have done before. And voila, we have our search box.

All we have to do is use the Livewire search element, just like we have done before. And voila, we have our search box. Now, this does mean that the search URL now has two search boxes. But now that we have this capability on every page, I'll make the argument that we don't need that search route anymore. So let's just comment that out, and that's great. Now we have a search box on every page. And now that we have this search box being used inside of the layout, I want to make another change. Because I want the placeholder to be controlled by whatever is using that.

I want to make another change. Because I want the placeholder to be controlled by whatever is using that component, so that we could do something like this. We'll say placeholder equals, and then our text to be whatever we want. So in order for this to work, we need to go to our SearchComponent, and we need to add the public placeholder property. And then inside of our view, we need to take out the text for the placeholder, and we just need to use that placeholder property there. So now, inside of the browser, we see our text, whatever we want. But of course, that doesn't really make a whole lot of sense.

So now, inside of the browser, we see our text, whatever we want. But of course, that doesn't really make a whole lot of sense. So let's change that back to type something to search. Now, one thing to remember is that Livewire components are Blade components. So everything that we know about Blade components can almost be transferred to Livewire components, such as passing data. Here we are passing static data, a string, to a property called placeholder. That would work for a Blade component. And we will talk more about passing data. But for right now,

And we will talk more about passing data. But for right now, I want to essentially break up our search component into two components. I want the first component to still be our search component, but it's just going to contain the UI, the input element and the button. Then we will extract the display of the results to another component. So let's go ahead and create that other component. We will make Livewire, and let's just call it SearchResults. And let's open up those files. Let's start with the view, because we can take the markup from our search component.

And let's open up those files. Let's start with the view, because we can take the markup from our search component and lift that out and almost directly just paste it here inside of our search results view. Now, of course, this means that we need a property called results. So let's open up search results, and let's just add that public property. And then we will use this component just like we would any other. So inside of our search component, we will say livewire search results, and that's going to display the results. But we do get an error, for each argument must be of type array object.

that's going to display the results. But we do get an error, for each argument must be of type array object. That's because our results property is not an array. So let's give it a default value of an empty array, and voila, everything works there. But of course, if we attempt to search anything, we don't see those results. And the reason is very simple, because we extracted the ability to display those results into another component. So we need to take the actual results from the search component and pass them to the search results component.

So we need to take the actual results from the search component and pass them to the search results component. But now we aren't working with static data, we have dynamic data. So that means we will need to say results equals the results array from our search component. But if we test this out in the browser, we will again see that nothing happens. And that's because we expect the results property to be reactive. And by default, it's not. But inside of our SearchResults class, we can mark the results property as reactive with the reactive attribute.

But inside of our SearchResults class, we can mark the results property as reactive with the reactive attribute. And that's all that we have to do. So if we go back to the browser and perform a search, we will now see our results are displayed. But notice that everything shifted down, and that's because, well, that's what it does. The results are inside of a block level element. So we need to change this markup, or at least the styling of it. So for this div element, let's add some padding.

So we need to change this markup, or at least the styling of it. So for this div element, let's add some padding. Let's make it absolutely positioned so that it is out of the flow of the document. Let's add a border, let's make it rounded to match everything else. The background is gonna be gray-700 because I believe that's what I used as the background for the input element. Yes, it is. And then the border is going to be indigo-600 to match the background color of the button, except that needs to be border indigo-600. So now whenever we view this in the browser,

the background color of the button, except that needs to be border-indigo-600. So now whenever we view this in the browser, now we see that element always in the browser, even if there aren't any results to display. So we need to hide that by default. And we could do that right here inside of this component. We can add a class to the root div element, and we can say this. We'll count the results. And if it's greater than zero, then we will use the block class. Otherwise, we will use the hidden class.

And if it's greater than zero, then we will use the block class. Otherwise, we will use the hidden class. So now the element showing the results is hidden by default. Whenever we search, we now see the results. And that's great, except if we search for something that doesn't exist, we should get some kind of message here. Now, we can go back to our components here, and we could add an if directive. We'll count the results again, and if it's zero, then we will simply display a message that there are no results found.

We'll count the results again, and if it's zero, then we will simply display a message that there are no results found. But this isn't going to work, because we are only showing this div if we have some results. So really what we need to do is make this component be controlled by the search component, so that if there is any text inside of our input element, then we will show the results box. So we could do something like this. We could have a property called show, and we can say that we want to show this if the search text is not empty.

We could have a property called show, and we can say that we want to show this if the searchText is not empty. That means that inside of our components, we will need another reactive property called show. And then we will use that property inside of our view. So that here, instead of counting the results, we will just use our show property, and everything else should be okay. So if we perform a search, and we see our results, that's perfect. If we search for something that doesn't exist, we see our message, no results found.

If we search for something that doesn't exist, we see our message, no results found. And of course, whenever we clear, the results and the search text are cleared. So when you are building Livewire components, also remember that you are working with Blade components. And you can pass data from a parent to a child component, just like you would with a Blade component. You can pass static data, or you can pass dynamic data. But if you want the child to react to changes to a particular property, then you need to mark that property as reactive.

But if you want the child to react to changes to a particular property, then you need to mark that property as reactive. Thank you for watching. We'll see you next time. Take care.