Okay, so we have our movie list here component ready, but we haven't done much yet.
This is a simple text that is displayed on the screen, but we will replace it with our list.
So first what we need to do is we will need to prepare some data.
So we are here in a functional component so we can use hooks.
So what I can do is I can create a constant and we will store movies.
So that will be movies.
And then I can do set movies and that is typical hooks, two variables that I can access.
So movies will be reference to all the movies and set movies will be a method how to update the state
so we can do.
We'll also need to import it.
So curly braces use state and also I will use effects later on.
So we'll import it now.
So use state use state.
Is a method.
And then what I can do is I can provide a default.
So by default, I can provide an array and let's say I will create one object inside and I will do title,
and then I can say Rambo.
Okay, so I have this.
And then basically what is what that gives me is a movies that are already accessible.
So if I will go here and I will replace this text, I can replace it with a flat list also.
So I will need to import that from I can remove the actually I will use the text before later.
So I'll just add it here.
So flat list for now and then I can close it and then we'll need to add few things.
So first data and my data will be movies.
Also I need to add render item.
So that's going to be my function.
And then inside I will go item and that's our function.
And then we can display something here.
So I can do text and inside the text I can item dot title.
So we have that.
And let me take a look how it looks like now.
And I don't see anything here.
We might need to do some styling because it might be off the screen and I will double check if I have
anything but in the terminal.
So we will missing keys.
We will take care of that later on and I will show you what is the problem actually here and how to
solve it.
So apart from that, there is nothing here.
I'll just make it a little bit smaller like this.
And actually, I made a mistake here.
That's supposed to be like that.
So parentheses, not a curly bracket.
So if I will save it, I can see here something is printed there, so I can't really see it because
it's on on the top bar there.
So basically, if I will add another item here.
So let me add something to the mockup data.
That's like classic from 80s or 90s.
And you can see here I have two of them.
So basically I have a flat list with the movies and at the moment I'm using stage to initiate the kind
of mock up data.
So what we need to do now is we need to work to get the data from our server.
So how can we do it?
I will use as we are doing functional component here.
So normally if with a class based component what you do is componentdidmount method, but this time
we can use useeffect and then we insight, we can do arrow function.
Like that.
And that will we will use a method here.
So what we need to do, we can do the same method as we've used with the web, which is fetch.
So basically the fetch will be the method to get our movies and I can go here and I can grab it the
same way as we've done it before.
I can grab this URL.
And then the first argument is the URL, and then we need to go API and then slash movies.
So this is the first argument.
The second argument can be an object.
So we can put a few things here.
So method will be get and then we'll need to also do headers.
And in headers the same way as we've done it before.
Authorization.
And then we need to provide a token.
So I will do backtick here.
That means then I will be able to inject the token inside.
So we'll do token token space and then I will need to do a token here.
So what I will need to do now at the moment I don't have a login yet so I have no way to get that token.
So what I can do is I can go here and open this in a browser and then I can go admin to the tokens and
I will copy this token.
And for now I will use a static token like this and then I will replace with something dynamic.
So I have that we have some errors because I save it and it's supposed to be here, it shouldn't be
here.
And then we can use then and we'll have a response that I will do press bones.
To Jason.
So I will convert it to Json.
The first one, and then we can chain it and then we can have another.
Then this one will be Json response already.
And then what I can do is I can set movies.
I'm trying to do everything here and then set movies.
This one.
So basically I'm chaining here.
So whatever is coming back from the fetch, this is not a Json.
So this one I will convert it so I can put it in a new line here and this one on a new line.
So first I will convert it to Json and then once I have a Json, I can chain and do another then.
And then in the promise here I will have a Json response and I will put it whatever it's in the Json
as a movies here.
So we will be using this method from state.
So I have that already.
Unfortunately, sometimes when you have a error like this, it's kind of free.
So what you need to do is you do controls, you go to terminal control C and then arrow up start and
we will start again.
So sometimes it just lock itself and you can know how to watch and start it from there.
So what I will do is I will open the simulator again.
And you can see it complains about the semicolon here that I forgot to remove or add it by accident.
So actually, I need to kill the application.
And run it again.
And we have, uh, two messages here, and then we still have the original one there.
So let me come back there and quickly fix it.
First thing it complains about not handling the error.
So what I will do is I will do catch.
And then we can catch an error.
And then for now, I will just console.log.
Console.log that error.
Arrow there.
So it's not going to complain about that.
I'm not doing anything with the arrow.
So that's it.
And actually, I made a mistake here that's supposed to not to Json, but the method is Json here.
So if I will save it now.
Uh.
And it froze again.
So what I need to do is I will stop it.
Actually, I can run it meanwhile.
Okay, so now I guess we have some data because it complains about this index.
So trying to get the frame out of the range index.
And so I guess we have the data because we put it set movies here.
So the, our movies is here.
What I can do is I can remove the initial data.
So we'll start with an empty array and then we need to go back to the flat list here.
We'll need to add a key here.
So basically, whatever we do, at least we need to tell React that we are using a key.
So I will do item ID for now and then I will save it.
And we still have a problem.
So let me take a look.
What's the error?
Can perform a React state update on an unmounted component.
This is on nobody syndicate the memory leak in your application to fix.
So what is happening here is I've created a so I'll close it for now.
And what I'm doing here is I'm using useeffect here.
So basically useeffect will trigger whatever we actually have any rerender.
So it will just go in a loop and uh, forever because this is not a componentdidmount.
So in order to have it only once, what I can do is as a second argument, I can put an empty array.
That means I will trigger useeffect, whatever.
It's something change here.
But if it's empty, it will be triggered only once.
So we'll save it now and then I can come back here.
And I still have that problem.
Actually, I can.
I spot a problem here because that's supposed to be movies like that.
And I have my list here.
And you can see here Terminator and Avatar here, too, despite the fact this is empty at the beginning.
So the data is successfully flowing to our application and we use fetch.
So we had a little bit of problems to set it up.
And but we finally have our data alive displayed on our application.
And as you can see, the method itself is very easy.
So we use exactly the same as we use it in our React application.
So whatever you know, in React, you can easily migrate it from there to react native.