Learn
Child Components Update Their Siblings' props
Child Components Update Sibling Components

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 lesson 2, you learned that lesson 1’s pattern is actually part of a larger pattern: a stateful, parent component passes down an event handler to a stateless, child component. The child component then uses that event handler to update its parent’s state.

In this lesson, we will expand the pattern one last time. A child component updates its parent’s state, and the parent passes that state to a sibling component.

An understanding of this final pattern will be very helpful in the wild, not to mention in the next React course. Click Next and we’ll build an example!

Instructions

In this video, the Like and Stats components are siblings under the Reactions parent component.

  1. The Reactions component passes an event handler to the Like component.
  2. When Like is clicked, the handler is called, which causes the parent Reactions component to send a new prop to Stats.
  3. The Stats component updates with the new information.
Folder Icon

Take this course for free

Already have an account?