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.

React Programming Pattern

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>; } }

One of the most common programming patterns in React is to use stateful parent components to maintain their own state and pass it down to one or more stateless child components as props. The example code shows a basic example.

Changing Props and State

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 component should never change its own props directly. A parent component should change them.

State, on the other hand, is the opposite of props: a component keeps track of its own state and can change it at any time.

The example code shows a component that accepts a prop, subtitle, which never changes. It also has a state object which does change.

Passing State Change Functions as Props

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>; } }

If a React parent component defines a function that changes its state, that function can be passed to a child component and called within the component to updating the parent component’s state.

In this example, because this.setState() causes the Name component to re-render, any change to the <input> will update the Name component’s state, causing a new render and displaying the new state value to the <p> tag content.

Event Handlers and State in React

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>; } }

Event handler functions in React are often used to update state. These handler functions often receive an event as an argument, which is used to update state values correctly.

In the example code, we use event.target.value to get the input’s value.

Using Stateless Updaters and Presenters

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>; } }

A common React programming pattern is to use a parent stateful component to manage state and define state-updating methods. Then, it will render stateless child components.

One or more of those child components will be responsible for updating the parent state (via methods passed as props). One or more of those child components will be responsible for displaying that state.

In the example code, StatefulParent renders <InputComponent> to change its state and uses <DisplayComponent> to display it.

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