Stateless Components From Stateful Components

Learn your first React programming pattern

Start[missing "en.views.course_landing_page.react-102.course_illustration" translation]
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 [...] 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 [...] . Now, let's make our stateless component class.

  4. 4

    A [...] is supposed to pass its [...] to a [...] . Before a [...] can pass anything to a [...] , you need to [...] [...] 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 [...] , 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 [...] that can change [...] 's state. [...] must pass this function down to [...] , so that [...] can use it in an event listener on the dro...

  4. 4

    You just passed a function down to [...] that can change [...] '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 [...] to a stateless, child component. I...

  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, [...] had two jobs: 1 - [...] displayed a name. 2 - [...] offered ...

  3. 3

    Look at Parent.js in the code editor. Three things have changed in this file since the last Lesson: 1. [...] has been required on line 4. 2. A [...] instance has been added to the ren...

  4. 4

    You're on the last step! You've passed the name down to [...] as a [...] . Now [...] has to display that [...] .

  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 [...] . (**Pa...

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

Stateless Components From Stateful Components

Start[missing "en.views.course_landing_page.react-102.course_illustration" translation]