- [Instructor] Okay, now that we have all our styling
converted over to styled components,
you may be wondering what the point of all of that was.
It didn't really reduce the amount of styling in our app
and it also didn't make our app look any different.
Well, in this video,
we're going to learn about a feature of styled components
that in my opinion,
makes the initial work of incorporating them into our app
completely worth it.
Since you're most likely very familiar with React
by this point,
you'll know that one of the main features of React
is that we can pass props to components
in order to configure them in some way.
For our TodoList items, for example,
we pass in data that specifies the Todo
that should be displayed in that particular component.
Well one of the really nice things about styled components
is that we can pass props to them as well
and use those props to modify their styling
and provide better visual cues for the user
depending on the information we're displaying.
So to show you what I mean,
let's make some changes to
the appearance of our TodoListItems.
You might remember from a previous video
that the TodoListItems that the server gives back to us
in addition to having a text property
and an isCompleted property,
also have a createdAt property
that tell us when that particular Todo was created.
So since we have access to the date
that a given Todo is created,
why don't we display Todo items
that are older than a few days
with a red outline or something like that
so that the user sees them as more urgent.
While the first thing that we'll probably want to do
is display the actual createdAt date
on each of our Todo items
and we'll do that like this.
Right underneath the todo.text,
we'll say paragraph
and then we'll say Created at
and then a non-breaking space
and then we're going to do
a little bit of code wrangling here
to get this date to display correctly.
We're going to say in parentheses,
new Date,
todo.createdAt
and then we'll say .toLocaleDateString
with parentheses after it.
And if we run our code,
just to check that this works,
we should see that our app now displays
a createdAt dates for all of our Todos.
And keep in mind that the way I created the
fake Todos on the server
were simply by taking today's date
and subtracting a certain number of weeks.
So that's where these dates came from,
they might be different from the ones you have.
So now that we've done that,
let's apply custom styling to older Todo items
that should be displayed as more urgent.
So here's how we do that.
For this TodoItemContainer component that we defined,
we're going to want to pass the createdAt date
into this component as a prop.
So we'll say createdAt equals
and then we're going to pass todo.createdAt.
And now that we've done that,
here's how we can use this createdAt prop
inside our style component.
Let's go up to where we defined our TodoItemContainer
and what we're going to do
is add a border-bottom property to the styling.
What we're going to be doing here again
is adding a red border
to the bottom of any older Todo items.
And once we've done that,
we're going to use this styled component's props
to decide what the value of this property should be.
And to do that,
we'll use string interpolation like this,
${} and then inside this interpolation,
we're going to create a function
that takes one argument called props
and returns a value we want for the bottom border.
So what we're going to do is say
new Date(props.createdAt) is greater than
new Date(Date.now() minus 8640000
and this is equal to one day in milliseconds,
so let's say times five.
So what we're saying here,
if you didn't quite pick up on it,
is if the createdAt date of a given Todo
is more recent than today's date minus five days
and then we're going to use a ternary operator here
to decide what the actual value
of border-bottom should be.
So if it's a more recent Todo,
we're going to display no border
and if it's an older Todo,
we're going to say 2px solid red at the bottom
and don't forget to add a semicolon
and I'm realizing right now
that this prop that we're passing in
doesn't quite match the name.
It should be createdAt instead of createAt.
So if we correct that and save our app,
and go back and look,
we should see that our older Todo items
now have this nice red border along the bottom
to make them look more urgent.
And again the nice part about this
is instead of having to include the logic
down here in our jsx
for deciding between different stylings,
the logic's now pulled up into our styled components
where it belongs
and this has the potential
to really clean up our jsx even more.