Time for some state management in the app component because when we update the array like this component
wouldn't be rendered.
That's how react works in our function component.
We can manage state with the use state hook and again if you don't know this sort of state or function
components or hooks doesn't tell you anything.
Definitely check out some dedicated react resources like my react The Complete Guide course.
So now I want to manage my two dos here with state.
And for that I'll clear that dummy to do with which I started and instead initialize the state by calling
you state.
Add to that however I can pass my empty array as a starting state value so did initially my state is
an empty array no use state always returns an array with exactly two elements The first element is the
latest state snapshot for this render cycle and the second argument The second element in the array
is a function to update that state and re render the component we can use a radius structuring about
which we learned earlier in the course to pull out these two elements and stored them in separate constants.
And then here we have the two dos and let's say a function named set to dos with that we still get our
to do as array and now in here in the to do add handler I want to call set to dos and set my to do is
array to a new array which has a new to do text added to it.
Now for that we can of course pass in the new array and add a new object let's say with an idea where
we create a random idea with moth random to string.
It's not really unique but good enough here and where we then also have our text which is that text
value I'm getting here.
But strangely enough I'm getting an error here and the error we're getting is that this argument is
not a sizable well basically into something which expects to have an array of nothing.
And that's of course not what we want here.
We don't want to have an array of nothing as our state.
Why is this happening.
Because here when I initialize use state with an empty array typescript infers how our state will look
like if I would initialize this to a string.
Types could would infer that my state is a string so if I temporarily removed this and I pass in some
text it would be accepted.
If I pass in an array typescript expects that it's an array but not an array of anything but always
basically an empty array so an array of nothing.
Which of course I don't want here to fix does we have to tell react how our state will look like over
time.
And for that we can again use that you state is a generic function because we can pass in the structure
of our estate so which type of data our state is off and there we can pass in that our state should
be an array of objects to be precise in the array of objects where we have an I.D. property which is
a string and a text property which is a string.
And now this state update is allowed now writing this here is of course fine but since we'll need it
in different places in the app I'll actually create a new file and named as to do dot model dot t s
the file name is up to you.
And here I want to export basically an interface name to do where I just want to describe how a to do
item should look like in my app that I want to have an idea of type String and a text property of type
String.
And with this export it here in the app component we can import this.
So here we can import to do from dot slash to do model and here we simply then have an array of to dos
which is of course shorter and easier to read.
And now our state update still works but this is a bit cleaner at this as you see is really important
here.
When working with something like an array where types who can't infer which type of data you want to
store it eventually if you initialize it with an empty array with this however it works.
The downside of course is that our estate updating logic here is not correct because right now I always
overwrite deep existing array of tattoos with a new array that only has exactly one element and instead
I want to overwrite it with a new array that has all the old elements as well as the new element.
So let's adjust this logic in the next lecture.