Initial state

Now, let's look at the initial state of this 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: ""
}; 

The state consists of an array of articles, a title string, and a summary string. Each article object in the articles array has several string fields to help render the article and an id field, which is a number. The number is generated by id.next(). Let's take a look at how this...