Alright, this counter component that we've been using, I think we've outgrown it. We've done everything we can do to make it work. Let's look at a more complicated component example. So we're going to make a to-do component where we can add to-dos and keep track of them, so that we can implement more complicated things like wire:model and wire:loading in the future. So this video is all about taking this counter component, clearing it, and creating a new to-dos component. So let's do that. So we're going to call this to-dos, refresh, and to-dos doesn't exist.

So let's do that. So we're going to call this toDos, refresh, and toDos doesn't exist. This class doesn't exist. So let's make that happen. Let's go to Counter, and let's just duplicate Counter, and we'll call this toDos. Set this to toDos, and then we can get rid of the code we have in here, we'll keep our render method, and then all of this HTML we're going to swap out. So let's just start doing that. I've pre-styled this beforehand, so we can call this toDos, and then we can just add what we need to inside of it.

I've pre-styled this beforehand, so we can call this toDos, and then we can just add what we need to inside of it. Alright, so the div toDos, we need an input element, and that's where we're going to type in the to-do we want to add to the list. And then we'll also add a button, and it's going to say add to-do, and then a list of the actual to-dos. We'll say one to-do, two to-do, to-do, to-do. Okay, one to-do and two to-dos, refresh, and there we go. Okay, so the HTML, the component renders on the page, it's styled nicely, we're basically good to go.

So I guess we're going to have to stay kind of in the sandbox, not all this stuff's going to work, but we're going to write it as if it did. All right, so the first thing that we're going to do is as we're typing into this input, we want to store that data on our component. And if you're familiar with Livewire, you know how you normally do this with wire:model. So you'd say wire:model, and then some property name, like let's just call it draft. And then we'll say public $draft = '' for now, and then as the user types into this input, AJAX requests would be sent back to the server and would populate this public property so that when a user says wire:click addTodo, whoops, go back, come on, wire:click addTodo, all right, when a user clicks that, this addTodo method is going

public property so that when a user says wire:click addToDo, whoops, go back, come on, wire:click addToDo, all right, when a user clicks that, this addToDo method is going to get fired, which we don't have yet, so let's create that. addToDo, okay, and then we need a list of toDos to add this draft to. So let's create that, public toDos, and that's going to be an array, all right, and then here we could say this->toDos, push on a new item onto toDos, and that's going to be this->draft, and then clear out draft so that we can type a new one. All right, so that's basically all the code we need, except this <ul> right now is hardcoded. We need to dynamically drive this out based on this toDo array. So let's actually add to just so we can see it.

We need to dynamically drive this out based on this to do array. So let's actually add two just so we can see it. One to do, two to do, okay. All right, so inside this <ul>, we'll use plain Blade and say to dos as to do, okay, and then end foreach, okay, and now inside of the <li>, this is where we just plain echo out a to do right here. So let's refresh, and there we go. These are dynamically driven out, and let's just do this. Let's actually hardcode something else just so we can see that our wire:click we know works.

Let's actually hardcode something else just so we can see that our wired:click we know works. So instead of using this draft, we know that draft doesn't work because we don't have wired:model implemented yet, but we do have wired:click implemented. So this part, we should be able to just sub out with, let's say, some new toDo. All right, and now if I click add toDo, with any luck, we're going to see some new toDo, and we do. Awesome. We can keep doing that, and it keeps adding toDos. So we know that everything works up until the things we haven't implemented, which is

We can keep doing that, and it keeps adding to dos. So we know that everything works up until the things we haven't implemented, which is basically just wire:model. So that's going to be our new challenge. In the next video, let's implement a key part of Livewire's API, something that distinguishes it from other tools like it, makes it really easy to take inputs and just have them be public properties on your component that you can easily manipulate. So let's do it. In the next video, we're going to do wire:model.

In the next video, we're going to do wire:model.