React Components: State and Props

Loading...

From the course by The Hong Kong University of Science and Technology

Front-End Web Development with React

100 ratings

The Hong Kong University of Science and Technology

Front-End Web Development with React

100 ratings

Course 2 of 4 in the Specialization Full-Stack Web Development with React

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

From the lesson

Introduction to React

In this module we get a quick introduction to front-end JavaScript frameworks and libraries, followed by an introduction to React. We will also learn about React components and JSX.

React Components3:41

Exercise (Video): React Components Part 124:25

React Components: State and Props9:17

Exercise (Video): React Components Part 222:33

React Components: Lifecycle Methods Part 114:18

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

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.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play