So the goal is to build a To Do List component and hence here in the source folder I'll add a new sub
folder components in there a To Do List dot t is x file which should hold my To Do List component.
Now to build a react component we need to import react from react.
Otherwise J as X will not work in this file and then I create my To Do List constant which stores an
arrow function.
And of course this doesn't have to be an arrow function you could also use a function with the function
keyword and it will export this.
Now let's use our extra types good features now and let's set the type of this to react FC to indicate
that this should not be a regular function but a functional component.
Hence we get an error because we are not returning something that qualifies as a react element.
So in here we should return let's say a unordered list because I want to render a list you're returning
a unordered list for now makes sense.
Now on that unordered list I want to output a list items.
So in here we could expect to get our let's say two dos and that's an array and in that array we have
an object where every item has an idea let's say 2 1 4 2 2 1 and a text like finish the course.
And this is only one item but of course you could have multiple such objects in this array in here in
our list we can then dynamically output to dos and map them into a list of list items.
So here we go through all the to dos.
This is a built in javascript function of course to map function and we return a list item for every
element in disarray and in that list item I set to do dot text as content on the list item and add this
special key prop which react actually once on repeated elements sitting next to each other.
And here we should pick something unique and these ideas should qualify as a unique identifier.
With that we're rendering a list of to dos let's now integrate the to do list component into the app
component.
And for this we can of course go to the app component import to do list from dot slash components to
do list like this the dot t is X extension will be added automatically by to build workflow we're using
under the hood here and then here instead of our div we can render to do lists like that if we now safeties
and we go back to the running page we see this one to do here styling is awful and we can add a better
styling later but for the moment that would be fine.
Now this however is not really realistic when we're building this to do list app I later want to be
able to add new to dos with a separate component which we don't have yet and we will probably manage
to to dos here and as app component because here in this place we will have a component that adds to
dos and that component will be able to talk back to this app component in here we then manage our array
off to do is and we add to do is to that array or we delete tattoos from that array and Q to do list
we would then passed at a rate.
So even though we're not managing it yet we would probably have that to do is array not in the To Do
list but in the app component that's more realistic that this array will later end up here so we can
already move it here.
Now we need to pass it to to do list and for this of course we can use props.
So on the to do list we could have items prop the name is of course up to us because we are defining
this component we can define how it's prop should be named and we can feed in our to dos array now we
already see that the idea e doesn't like this and if I tried to save this we also got a compilation
error we got a compilation error because property items does not exist on type whatever.
So it basically does not exist on this intersection type here which in the end defines the structure
of the props received by to do list because when using typescript with react you have to be clear about
the types you're working with and that does not just mean that you tell typescript that this is a special
kind of function no it also means that if you rely on props in some component you tell typescript how
these props should look like how they are structured.
So in the To Do List component we receive props here right.
That's regular react and on the props we probably have items prop property.
So we have a prop named items and that is indeed what I set up here.
I have these items prop.
The problem though is this technically would work but typescript is not a board yet we didn't really
tell typescript dead our props should have items property here to tell it we can use the fact that this
function component type here is actually a generic type a generic type where we can define all extra
props besides the default prop of children which every computer it has which we expect here so we can
add our angular brackets here and add our object that describes the structure of this props object we're
getting here or to keep our code leaner.
We do it as an extra interface here and that's totally optional.
So here we could have our To Do List props.
And this describes how our props look like in here.
I expect to get our items key where we have an array of objects where every object has an I.D. which
is a string and has a text which is a string right.
That's the data we're managing here.
We have an array of objects with an I.D. string and text string.
That is what I expect to get here as props and array of such objects.
And if we're here we can now point at this to do list props interface and now everything is fine.
Now typescript understands that here we will get props where we will have items prop and that does items
prob will be an array where we have an I.D. key and a text key on every array element.
So now he's safe does it compiles and we get the working output again.
So again this is typescript being used with react.
We don't just use it to tell react or to tell typescript that this is a functional component but also
about the properties component eventually gets and this helps us a lot with type safety in a way it's
that I hear accidentally think that its name to dos.
No this is not supported we get an error it is items you all will see I'm getting all the completion
here.
So coding gets a lot easier when we're OK with typescript here and that of course is the whole advantage
of typescript.
It simplifies coding it a whites unnecessary mistakes and as you can see it also does so in a reactive.
Now of course we're not finished though at the moment our to do is here.
Never change.
And I want to change that.
I wanted a component which allows us to add new tattoos.
So let's work on that next.