-
So since we put our movie card component directly inside of our views components directory, EdgeJS will actually register any components
-
that we put within views components as a tag, meaning we can use it similarly to how we're using the include tag right up here. As an example, let's go ahead and redefine our movie card component here.
-
So we can do at, and we just need to directly provide the tag name. Now the tag name for our components just needs to point to the component path within the components directory.
-
So that's gonna be movie, and then we can do dot to reach inside of the movies directory and then provide card. So we can do movie.card, just like so, and that's gonna call our movie.
-
Now we can copy over our props. So let's go copy these. And we just paste them into the function that we're calling for the actual movie component. So right in here.
-
And these will get passed through as props, the same as it is within our full component usage. So now we can actually get rid of our full component usage and just use the tag directly.
-
So if we give this a save, jump back into our browser, we see the exact same thing. Let's go ahead and hide this back away. As you can see, the card here is underlined, same with our include. Whenever we see this,
-
we can command or control click into it to actually dive into the file. Now in the last lesson, we learned about the props property, and then it has some superpowers baked into it,
-
like being able to plop our props directly as attributes anywhere within this component by calling the toAttributes method. But we also learned with our class
-
that we can read it directly as a stateful type of object. So now just like we inspected the state of our page, let's go ahead and do the exact same thing here. Outside of our divs,
-
let's go ahead and plop inspect state, just like so. Okay, let's go ahead and dive back into our browser, and we'll see all of the utilities that are globals throughout EdgeJS first.
-
App information, request information, those are all globals. But if we scroll down to the bottom, this is where we'll start to see stateful information specific to the component.
-
For example, the movie that we're passing in as props, the class that we've passed in as a prop, you'll see something called slots here. We'll cover what those are here in an upcoming lesson.
-
And you'll see the props has both our movie and our class within it. And EdgeJS is also providing those directly as default values onto our state. So as we pass things in as props,
-
they'll go into this object, and we can always access them from this object, but they're also spread into the overall state of the component itself, as we see here. And it's for that reason
-
that we can reach for movie directly without having to do props.movie. Now you can absolutely do props.movie if that is easier for you to understand, but just note that you in no way need to do that
-
because movie is provided directly onto the state anyway. So let's go ahead and open up the documentation for EdgeJS real quick. So we'll dive into here. We'll go to components, props,
-
and take a look at all of the options for props. So if we scroll down just a little bit past the initial example, we'll see serialized props to HTML attributes.
-
This is something that we've already covered and utilized, but we can also see an alternative usage here as well. So while we split it apart,
-
you can also merge in your class list here as well. So let's go and give that a try. So let's dive back into our application, hide our browser back away. Within our card component, we'll scroll up a little bit.
-
Let's take our class list once more, and let's just take the string portion and cut that out. And then let's remove our class altogether. Condense this up, and let's define a local variable here.
-
So we can do @let, class is a reserved word, so we'll call this class name, equals, and let's paste that string in. So now we have our default class name,
-
and on our props, let's go ahead and merge that in. Array, we'll provide in an object, call this class, provide it in as an array, and we'll do class name just like so.
-
Lastly, within our accept, we wanna get rid of class so that it can actually merge together. So let's give this a save and see if it worked. Actually, to make it a little bit easier on ourselves, let's go ahead and remove our state inspect here
-
real quick too. Okay, now let's go ahead and see if it works. Let's open this back up in our browser, and sure enough, all of our cards still look like cards. The style is still the exact same. So everything worked there A-okay.
-
Let's dive back into the documentation real quick. So if we continue scrolling down, we can see that we can also conditionally merge into an existing class. So we can merge unless, remove existing styles.
-
If this is truthy, the class defined here as the merged in class will be ignored. If this is falsy, then this merged in class
-
will get merged into the underlying class for the input. And then of course, you want to exclude whatever variable you're using to determine whether or not you should merge from your attributes as well.
-
Cool, so let's continue scrolling. And we actually start to see a props API. So we can see various options that we have directly for our props as well. So we can determine whether or not a prop exists,
-
get a prop value by doing props.get, which is an alternative approach to what we were doing earlier, where we were doing props.class to get our class directly from the props.
-
You can simplify your prop declaration by using the only key. So that it will only include keys that you've provided there. And as we've already seen, you can do except to exclude as well.
-
Then there's the merge, merge if, and merge unless. So as they showed up above here, if we scroll up a little bit more where we have merge unless, there's also a merge if,
-
which would be an inverse conditional of merge unless. And then you have the baseline merge, which we've already used.
