Chevron Left Icon
Stateless Components From Stateful Components
Lesson 1 of 3
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
    In the last lesson, you passed information from a stateful, parent component to a stateless, child component. In this lesson, you’ll be expanding on that pattern. The stateless, child component w…
  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