Key Concepts

Review core concepts you need to learn to master this subject

Stateful and Stateless Components

React Programming Pattern

Changing Props and State

Passing State Change Functions as Props

Event Handlers and State in React

Using Stateless Updaters and Presenters

Stateful and Stateless Components

class Store extends React.Component {
  constructor(props) {
    super(props);
    this.state = { sell: 'anything' };
  }
  render() {
    return <h1>I'm selling {this.state.sell}.</h1>;
  }
}

class Week extends React.Component {
  render() {
    return <h1>Today is {this.props.day}!</h1>;
  }
}

In React, a stateful component is a component that holds some state. Stateless components, by contrast, have no state. Note that both types of components can use props.

In the example, there are two React components. The Store component is stateful and the Week component is stateless.

Stateless Components From Stateful Components
Lesson 1 of 3
  1. 1
    Stateless Components Inherit From Stateful Components
    Let’s learn our first programming pattern! In this lesson, we’ll take a look at a simple version of a programming pattern. The following lessons will expand upon that lesson, and by the end, we…
    Start
  2. 2
    Build a Stateful Component Class
    Let’s make a stateful component pass its state to a stateless component. To make that happen, you need two component classes: a stateful class, and a stateless class.
    Start
  3. 3
    Build a Stateless Component Class
    Great! You just made a stateful component class named Parent. Now, let’s make our stateless component class.
    Start
  4. 4
    Pass a Component's State
    A is supposed to pass its state to a . Before a can pass anything to a , you need to import Child into Parent.js.
    Start
  5. 5
    Don't Update props
    Great work! You just passed information from a stateful component to a stateless component. You will be doing a lot of that. You learned earlier that a component can change its state by c…
    Start

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