Learn React.js: Part II: Course OverviewCourse Overview

Stateless Components From Stateful Components

Learn React programming patterns for mixing components with and without state.

Start

Key Concepts

Review core concepts you need to learn to master this subject

Stateful and Stateless

Programming Pattern

Changing props and state

Stateful and Stateless

//This is a stateful component
class Store extends React.Component {
 constructor(props) {
  super(props);
  this.state = { sell: 'anything' };
}

//This is a stateless componenet
class Week extends React.Component {
 render() {
  return <h1>Today is {this.props.day}!</h1>;
}

In React, a stateful component is a component that has one or more state property. While a stateless component doesn’t have any state property.

Programming Pattern

//This is a stateful component
class Store extends React.Component {
 constructor(props) {
  super(props);
  this.state = { sell: 'anything' };
}

//This is a stateless componenet
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 code snippet above shows a basic example.

Changing props and state

//This is a stateful component
class Store extends React.Component {
 constructor(props) {
  super(props);
  this.state = { sell: 'anything' };
}

//This is a stateless componenet
class Week extends React.Component {
 render() {
  return <h1>Today is {this.props.day}!</h1>;
}

In React, a component should never change its own props. Attempting to do so would result in doing nothing because a component cannot change its own prop. In order to change a prop, you would need to use a parent component that passes them down. State, on the other hand, is the opposite of props. state is used to store information that a component itself can update. The code snippet above shows what not to do with props.

Stateless Components From Stateful Components

Lesson 1 of 3

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
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
Great! You just made a stateful component class named Parent. Now, let’s make our stateless component class.
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
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
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
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
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
You just passed a function down to Child that can change Parent’s state!
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
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
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
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
You’re on the last step! You’ve passed the name down to as a prop. Now has to display that prop.
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. …