Making components functional

While implementing these new components, you may have noticed that they don't have any responsibilities other than rendering JSX using property values. These components are good candidates for pure function components. Whenever you come across components that only use property values, it's a good idea to make them functional. For one thing, it makes it explicit that the component doesn't rely on any state or life cycle methods. It's also more efficient because React doesn't perform as much work when it detects that a component is a function.

Here is the functional version of the ArticleList component:

import React from "react";
import ArticleItem from "./ArticleItem";

export default function ArticleList({
  articles,
  onClickToggle,
  onClickRemove
}) {
  return (
    <ul>
      {articles.map(i => (
        <ArticleItem
          key={i.id}
          article={i}
          onClickToggle={onClickToggle}
          onClickRemove...