Now, I do this in a certain order simply so that I will not miss any of the steps.
So whenever I create a component and I'm going to export them,
I will first put the export before them there.
Many times people forget that and
that leads you into a wild-goose chase after missing items in there.
So follow a certain pattern in the way you write your code to save
yourself the trouble here.
Now, this function, what is this function going to do?
It is going to return.
As you realize, in a functional component,
you simply return a view by using a return statement.
And this is going to return a FlatList here.
And what does the FlatList take as its props?
The FlatList expects me to supply some information
which it will use in order to render the list of items.
Now, this FlatList will be mapped into a list view in Android and
the corresponding list view in iOS.
So that's what is going to be done automatically for us by react-native.
Now, what does this FlatList take?
It takes a data as one of the parameters and
the data that I'm going to pass is props.dishes.
Recall that main component was sending in dishes as the props for
my menu component, so there I'm going to pass that in as the data for my FlatList.
And then another prop that FlatList takes is called renderItem.
What does renderItem do?
The renderItem can be used to specify how to render each item in the list.
So notice how the list is rendered in react-native and
different from the way it is rendered in a typical React application.
The FlatList allows me to render a list of items like this.
So what does this renderItem do?
The renderItem takes, A parameter
which is where we will render each item in the list.
So when you supply a props here, this should be an array of objects there.
And then so the FlatList will literally iterate over
every item in this array, and then render each one of them
using the view that is given in the renderMenuItem here.
So that's how we interpret this.
And also, when you render a list of items,
you would have to Supply a key for each of those items.
Now, the FlatList supports this thing called a keyExtractor.
The keyExtractor will extract one of the props off each
item in the array and use that as a key here.
Now, in this case, every item, when you go into dishes.js file,
you'll notice that every item in the dishes.js file has this id here.
So I'm going to use this as my key for my items in the list.
Now, from your React course,
you should know why every item in the list requires its own key.