Key Concepts

Review core concepts you need to learn to master this subject

Returning HTML Elements and Components

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

A class component’s render() method can return any JSX, including a mix of HTML elements and custom React components.

In the example, we return a <Logo /> component and a “vanilla” HTML title.

This assumes that <Logo /> is defined elsewhere.

React Component File Organization

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

It is common to keep each React component in its own file, export it, and import it wherever else it is needed. This file organization helps make components reusable. You don’t need to do this, but it’s a useful convention.

In the example, we might have two files: App.js, which is the top-level component for our app, and Clock.js, a sub-component.

this.props

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

React class components can access their props with the this.props object.

In the example code below, we see the <Hello> component being rendered with a firstName prop. It is accessed in the component’s render() method with this.props.firstName.

This should render the text “Hi there, Kim!”

defaultProps

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

A React component’s defaultProps object contains default values to be used in case props are not passed. If a prop is not passed to a component, then it will be replaced with the value in the defaultProps object.

In the example code, defaultProps is set so that profiles have a fallback profile picture if none is set. The <MyFriends> component should render two profiles: one with a set profile picture and one with the fallback profile picture.

props

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

Components can pass information to other components. When one component passes information to another, it is passed as props through one or more attributes.

The example code demonstrates the use of attributes in props. SpaceShip is the component and ride is the attribute. The SpaceShip component will receive ride in its props.

this.props.children

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

Every component’s props object has a property named children. Using this.props.children will return everything in between a component’s opening and closing JSX tags.

Binding this keyword

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

In React class components, it is common to pass event handler functions to elements in the render() method. If those methods update the component state, this must be bound so that those methods correctly update the overall component state.

In the example code, we bind this.changeName() so that our event handler works.

Call super() in the Constructor

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

React class components should call super(props) in their constructors in order to properly set up their this.props object.

this.setState()

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

React class components can change their state with this.setState(). this.setState() should always be used instead of directly modifying the this.state object.

this.setState() takes an object which it merges with the component’s current state. If there are properties in the current state that aren’t part of that object, then those properties are unchanged.

In the example code, we see this.setState() used to update the Flavor component’s state from 'chocolate' to 'vanilla'.

Dynamic Data in Components

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

React components can receive dynamic information from props, or set their own dynamic data with state. Props are passed down by parent components, whereas state is created and maintained by the component itself.

In the example, you can see this.state set up in the constructor, used in render(), and updated with this.setState(). this.props refers to the props, which you can see in the render() method.

Component State in Constructor

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

React class components store their state as a JavaScript object. This object is initialized in the component’s constructor().

In the example, the component stores its state in this.state.

Don’t Change State While Rendering

class Header extends React.Component { render() { return ( <div> <Logo /> <h1>Codecademy</h1> </div> ); } }

When you update a React component’s state, it will automatically re-render. That means you should never update the state in a render function because it will cause an infinite loop.

In the example, we show some bad code that calls this.setState() inside of its render() method.

Arrow Chevron Left Icon
Components Render Other Components
Lesson 1 of 3
Arrow Chevron Right Icon
  1. 1
    A React application can contain dozens, or even hundreds, of components. Each component might be small and relatively unremarkable on its own. When combined, however, they can form enormous, fant…
  2. 2
    Here is a .render() method that returns an HTML-like JSX element: class Example extends React.Component { render() { return Hello world ; } } You’ve seen render methods return s, s,…
  3. 3
    This is new territory! You’ve never seen a component rendered by another component before. You have seen a component rendered before, though, but not by another component. Instead, you’ve seen …
  4. 4
    When you use React.js, every JavaScript file in your application is invisible to every other JavaScript file by default. ProfilePage.js and NavBar.js can’t see each other. This is a probl…
  5. 5
    Alright! You’ve learned how to use import to grab a variable from a file other than the file that is currently executing. When you import a variable from a file that is not the current file, th…
  6. 6
    Now you’re ready for to render ! All that’s left to do is render .
  1. 1
    Previously, you learned one way that components can interact: a component can render another component. In this lesson, you will learn another way that components can interact: a component can …
  2. 2
    Every component has something called props. A component’s props is an object. It holds information about that component. To see a component’s props object, you use the expression this.props. He…
  3. 3
    You can pass information to a React component. How? By giving that component an attribute: Let’s say that you want to pass a component the message, “This is some top secret info.”. Here’…
  4. 4
    You just passed information to a component’s props object! You will often want a component to display the information that you pass. Here’s how to make a component display passed-in informati…
  5. 5
    You have learned how to pass a prop to a component: You have also learned how to access and display a passed-in prop: render() { return {this.props.firstName} ; } The most common use of pro…
  6. 6
    Awesome! You passed a prop from a component to a different component, accessed that prop from the receiver component, and rendered it! You can do more with props than just display them. You can …
  7. 7
    You can, and often will, pass functions as props. It is especially common to pass event handler functions. In the next lesson, you will pass an event handler function as a prop. However, you h…
  8. 8
    Good! You’ve defined a new method on the Talker component class. Now you’re ready to pass that function to another component. You can pass a method in the exact same way that you pass any othe…
  9. 9
    Great! You just passed a function from to . In the code editor, select Button.js. Notice that Button renders a element. If a user clicks on this element, then you want your passed-…
  10. 10
    Let’s talk about naming things. When you pass an event handler as a prop, as you just did, there are two names that you have to choose. Both naming choices occur in the parent component class…
  11. 11
    Every component’s props object has a property named children. this.props.children will return everything in between a component’s opening and closing JSX tags. So far, all of the components that…
  12. 12
    Take a look at the Button component class. Notice that on line 8, Button expects to receive a prop named text. The received text will be displayed inside of a element. What if nobody passes a…
  13. 13
    That completes our lesson on props. Great job sticking with it! Here are some of the skills that you have learned: - Passing a prop by giving an attribute to a component instance - Accessing …
  1. 1
    Dynamic information is information that can change. React components will often need dynamic information in order to render. For example, imagine a component that displays the score of a bas…
  2. 2
    A React component can access dynamic information in two ways: props and state. Unlike props, a component’s state is not passed in from the outside. A component decides its own state. To ma…
  3. 3
    To read a component’s state, use the expression this.state.name-of-property: class TodayImFeeling extends React.Component { constructor(props) { super(props); this.state = { mood: ‘dec…
  4. 4
    A component can do more than just read its own state. A component can also change its own state. A component changes its state by calling the function this.setState(). this.setState() takes tw…
  5. 5
    The most common way to call this.setState() is to call a custom function that wraps a this.setState() call. .makeSomeFog() is an example: class Example extends React.Component { constructor(pr…
  6. 6
    There’s something odd about all of this. Look again at Toggle.js. When a user clicks on the , the .changeColor() method is called. Take a look at .changeColor()’s definition. .changeColo…
  7. 7
    In this unit, you learned how to use import and export to access one file from another. You learned about props and state, and the countless variations on how they work. Before this unit, you lea…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo