Getting Started with React: Lesson 11 of 14

Functional Components

Up Next

Lifecycle Methods

Autoplaying in 7 seconds!

Cancel

So far, we have been writing our components using the class syntax with a render method. This will be the way many of your components will be created. However, there is a smaller, more compact way to create components that only have a render method. It is called functional components.

Functional components don't have any state. They are simple functions that return the what should be on screen. The props passed to the component are passed into the function as the first parameter.

To demonstrate, let's rewrite the WeatherList component as a functional component.

import React, { Component } from 'react';
import WeatherListItem from './WeatherListItem';

const WeatherList = ({ days, onDayClicked }) =>
  <div className="weather-list flex-parent">
    {days.map((day, index) =>
      <WeatherListItem
        key={day.dt}
        day={day}
        index={index}
        onDayClicked={onDayClicked}
      />
    )}
  </div>

export default WeatherList;

Here we are exporting a function. This function takes in an object; these are the props passed to the component. We are destructuring the props to pull out the days and onDayClicked props. We then are returning the same thing that we had in our render function as before. However, the code is much smaller and simpler to understand. Also, this is the way the React team recommends to write components when you can. I am just hypothesizing here, but I think this is probably going to be one of the things that the React team works on optimizing as future versions of React are released. Therefore, for future projects, I would use functional components whenever I can.

This isn't the only component that can be refactored in this manner. I will leave the rest as a challenge for you to solve. If you have any trouble, you can look at the source code on the finished branch in the Github repository for this project.

In the next one, we will go over the lifecycle methods React gives us access to so we can hook into different parts of the React render and update cycles.

Alex Sears

Developing is not only my job but also my passion. I love to teach myself new things as much as I love teaching others. The more people we get involved in this little thing we call "web development," the better we can make it. I mean, we always need more cat videos, right?