At this point, we already learned a lot
about some important React features,
but we're not done yet.
Instead, it's now time to dive deeper into React
and learn about another super important React concept,
maybe the most important React concept
after components and props,
and that would be state.
Now, what's state about?
Well, let's say that in our component
we now wanna add a new post component
which simply displays a form
where we can enter the text
and the author name of a new post that should be added.
And, ultimately, in the application,
the website we're building,
we wanna be able to bring up that modal overlay,
that form which does allow us to add new posts.
Now, at the moment, we're not there yet.
Instead, we'll just render such a form.
And, as we type into this text area
or this input,
I wanna update the text that's shown in my first post here,
as a temporary step into the right direction,
before we then later can really use that form
to add new posts to this list of posts.
Now, for that attached,
you find a link to this new post .JSX file
and the new post .module.css file,
and you should add both files into your component's folder.
And, this new post component,
which basically looks like the other components
we built thus far,
it's a function that returns some JSX code,
in this case some form markup,
but only using standard HTML elements.
This component should now be used
next to our list of posts here.
So, here, maybe above that list,
I wanna use this new post component.
But, for that, we gotta do two things.
We have to import new post from ./newpost,
so that we make this component available in that file.
And, since you learned that sibling elements
are not allowed
and, at the moment,
new post would be a sibling to the unordered list,
we have to add this empty element,
this fragment, as it's called,
as a wrapper around new post and unordered list,
so that we fulfill that requirement React has
that in our JSX code
in the place where we return or store the JSX code,
we have only one root element.
By the way, as a side note inside of new post,
you will see that on the label
I have this HTML for attribute,
and here we have a similar case to class name.
It would normally be the for attribute,
but this is not allowed in JSX code,
and therefore here it's HTML for.
And, the good news are that with class name
and HTML for,
you now basically know all important deviations
from the standard attribute names
that you typically use all the time.
But, with that, we got this new post component output there
and, if you save all files,
you should see something like this on the screen,
this form above this list of posts.
And, my goal now is that as I type something here,
I update this text down there.
So, in the end, this text should go down there
and, if I type a name here,
that name should in the end,
go down there.
And, at the moment, that's of course not happening,
but that's where this new state concept
and feature can help us.