Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Stateless Functional Components

Stateless Functional Components

In the code editor, take a look at GuineaPigs from the last lesson.

Notice that its instructions object only has one property: render().

When you separate a container component from a presentational component, the presentational component will always end up like this: one render() function, and no other properties.

If you have a component class with nothing but a render function, then you can rewrite that component class in a very different way. Instead of using React.Component, you can write it as JavaScript function!

A component class written as a function is called a stateless functional component. Stateless functional components have some advantages over typical component classes. We'll cover those advantages in this lesson.

Click on Example.js to see a stateless functional component in action.

Report a Bug
If you see a bug or any other issue with this page, please report it here.