We have already seen the use of state in the previous exercise.
Babies told the information about the dishes in that menu components state.
And we use this information to render the menu items.
Another way of passing information to a component is through Props.
Let's discuss a little more detail next.
So, as we have seen in the previous exercise,
each component can store its own local information in its state quote and quote.
So this information is private and fully controlled within that component.
Now is state within a component can easily be passed to
its children through the use of props which we will talk about a little bit later.
In react, only class components can store state.
So, if in a particular component you need to store the state,
you need to implement that component as a class component.
We will see other kinds of react components there,
we don't need to store state and we can simplify the component declaration significantly.
As we have seen in their previous exercise,
the state information is usually declared in the constructor of the class component.
So, when you declare the constructor,
you would initialize a variable called this dot state which is
a JavaScript object which contains all the state for this component.
If you need to update the state of a component,
you cannot directly go and update the state by changing the property values.
Instead, any update to a state of the component has to be
done through the use of that Sect State method.
So, whenever you need to make any changes to the state of the component,
you always say this.setstate and then supply the property that you want to modify.
So, when you call the this.setstate with a particular property that is change,
then this change will be merged into the state of the component.
And again, let me remind you that you should
never change the state by doing something like this.
You can't say this state select dish is equal to dish.
So, never directly manipulate the state property values.
When you make use of the time component in your own component,
then whatever attributes that you specify to
the JSX element will be passed in as props to the child component.
So these attributes will be available as props within
the child component and you can
easily pass in multiple attributes to the child component.
Let's take a look at an example.
So in these examples,
you can see in the first case,
we are using this menu component within
your current component and then you're passing in dishes as one of the attributes.
Now when you pass this in,
then within the menu component,
this dishes information that your passing will be available as
this.prop.dishes and can be used within the menu component for it to render its view.
Similarly, you can pass in multiple attributes.
If you choose to for a child component and
the child component will get access to each of these multiple attributes, as this.
props.theattributeimage.
So, as you see this.props.dish or this.props.
comments and so on.
So, this is an easy way of a parent component passing information to its child component.
So in this case,
a parent component maybe storing the state and
then the state information can be passed to the child component through
the use of the props in the form of attributes that you specify to the JSX statements.
Just like the way you handle events in the DOM,
you can also handle events similarly in react.
But when you specify the events,
then you use camel case to specify the events.
And when you specify the event you'll pass a function as the event handler in this case.
As an example, you can see in this case we are
specifying the on click event handler there now,
written on click even handle and passing in an arrow function as a parameter there.
Now, within this arrow function as you can see,
if you want to pass some information or parameter back to the the event handler,
that can be easily done as shown in this example.
If you don't have any parameters or data to be passed back to the event handler,
then you can simply say this.onDishSelect instead of defining it as the arrow function.
We will see several users of such event handlers as they go along in this course.
And at that time, I will again remind you about
this particular aspect of how you handle events in react.
Very often, your react application will be implemented as a hierarchy of components.
So in that case,
you may wish to lift the state up to an ancestor of the current component.
So for example, if several components have a shared state and
any change to the state needs to be automatically seen by all these components,
then it is better to move the state to one of the ancestors,
common ancestor of all these components,
and ensure that any state changes will be sent back up to that common ancestor.
We will see the use of this in the exercise in one of the later modules.
But again, in the very next exercise,
you will see me lifting the state up from it child component to it's parent component,
to make it convenient for us to store the state.
Any changes to data in one component may need to be reflected to another component,
and this is where by lifting the state up
it makes it more convenient for you to handle this.
When you have an array of items,
you could easily lay them out as list in your react components.
Lists and the way you handle them is very similar to JavaScript.
So for example, if you have an array,
and you want to iterate over all the items in the array and then converted into a list,
you can easily do that using the map JavaScript function data.
So in this example,
you can see that I am taking the dishes which come in as an array of JavaScript objects
and then I do the map on that which gives me access to each element of this array.
And then for each element of the array I can then laid out as a list of item.
When you do list items in react.
For each of the items it is important to specify
the keys for each element inside an array.
So as you can see in this example,
I am using an outer div array a very specific keys is equal to dish ID.
So in this case since each dish will have its own unique ID,
I'm using the dish ID as the key when I lay out the list of items data.
The reason to specify a key in react,
is that when there are changes to
the number of items in the list maybe
a new item is added into the list or an item is removed from the list,
any such changes to the data may cause re-rendering of the list items.
So, when react is doing that,
it will use these keys to identify which items have been removed and so
appropriately partial re-rendering of this information is facilitated in react.
As you recall, react only modifies those parts of the gum tree that need to be updated.
With this quick understanding about the state and
props and how you lift the state up and the application of list of keys,
let's move on to the next exercise where we'll use all these concepts
in reorganizing our react application,
and then also use a better way of rendering the list of
items within our menu in our react application.
Jogesh K. MuppalaAssociate Professor
