Key Concepts

Review core concepts you need to learn to master this subject

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.

Arrow Chevron Left Icon
Stateless Components From Stateful Components
Lesson 1 of 3
Arrow Chevron Right Icon
  1. 1
    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…
  2. 2
    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.
  3. 3
    Great! You just made a stateful component class named Parent. Now, let’s make our stateless component class.
  4. 4
    A is supposed to pass its state to a . Before a can pass anything to a , you need to import Child into Parent.js.
  5. 5
    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…
  1. 1
    How does a stateless, child component update the state of the parent component? Here’s how that works: 1 The parent component class defines a method that calls this.setState(). For an exam…
  2. 2
    To make a child component update its parent’s state, the first step is something that you’ve seen before: you must define a state-changing method on the parent.
  3. 3
    In the last exercise, you defined a function in Parent that can change Parent’s state. Parent must pass this function down to Child, so that Child can use it in an event listener on the dropdown m…
  4. 4
    You just passed a function down to Child that can change Parent’s state!
  5. 5
    Great work! Stateless components updating their parents’ state is a React pattern that you’ll see more and more. Learning to recognize it will help you understand how React apps are organized. …
  1. 1
    Patterns within patterns within patterns! In lesson 1, you learned your first React programming pattern: a stateful, parent component passes down a prop to a stateless, child component. In l…
  2. 2
    One of the very first things that you learned about components is that they should only have one job. In the last lesson, Child had two jobs: 1 - Child displayed a name. 2 - Child offered a way …
  3. 3
    Look at Parent.js in the code editor. Three things have changed in this file since the last Lesson: 1. Sibling has been required on line 4. 2. A instance has been added to the render fu…
  4. 4
    You’re on the last step! You’ve passed the name down to as a prop. Now has to display that prop.
  5. 5
    You just executed your first complete React programming pattern! Let’s review. Follow each step in the code editor: - A stateful component class defines a function that calls this.setState. …

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