text: import * as React from "react";
  
  const id = (function* () {
    let i = 1;
    while (true) {
      yield i;
      i += 1;
    }
  })();
  
  class MyFeature extends React.Component {
    state = {
      articles: [
        {
          id: id.next(),
          title: "Article 1",
          summary: "Article 1 Summary",
          display: "none",
        },
        {
          id: id.next(),
          title: "Article 2",
          summary: "Article 2 Summary",
          display: "none",
        },
        {
          id: id.next(),
          title: "Article 3",
          summary: "Article 3 Summary",
          display: "none",
        },
        {
          id: id.next(),
          title: "Article 4",
          summary: "Article 4 Summary",
          display: "none",
        },
      ],
      title: "",
      summary: "",
    };
  
    onChangeTitle = (e) => {
      this.setState({ title: e.target.value });
    };
  
    onChangeSummary = (e) => {
      this.setState({ summary: e.target.value });
    };
  
    onClickAdd = () => {
      this.setState((state) => ({
        articles: [
          ...state.articles,
          {
            id: id.next(),
            title: state.title,
            summary: state.summary,
            display: "none",
          },
        ],
        title: "",
        summary: "",
      }));
    };
  
    onClickRemove = (id) => {
      this.setState((state) => ({
        ...state,
        articles: state.articles.filter((article) => article.id !== id),
      }));
    };
  
    onClickToggle = (id) => {
      this.setState((state) => {
        const articles = [...state.articles];
        const index = articles.findIndex(
          (article) => article.id === id
        );
  
        articles[index] = {
          ...articles[index],
          display: articles[index].display ? "" : "none",
        };
  
        return { ...state, articles };
      });
    };
  
    render() {
      const { articles, title, summary } = this.state;
      const {
        props: { addArticle, articleList },
        onClickAdd,
        onClickToggle,
        onClickRemove,
        onChangeTitle,
        onChangeSummary,
      } = this;
  
      return (
        <section>
          {addArticle({
            title,
            summary,
            onChangeTitle,
            onChangeSummary,
            onClickAdd,
          })}
          {articleList({ articles, onClickToggle, onClickRemove })}
        </section>
      );
    }
  }
  
  export default MyFeature;
  