Event handler implementation

At this point, you have the initial state and the JSX of the component. Now it's time to implement the event handlers:

onChangeTitle = e => {
  this.setState({ title: e.target.value });
};

onChangeSummary = e => {
  this.setState({ summary: e.target.value });
};

The onChangeTitle() and onChangeSummary() methods use setState() to update the title and summary state values, respectively. The new values come from the target.value property of the event argument, which is the value that the user types into the text input:

onClickAdd = () => {
  this.setState(state => ({
    articles: [
      ...state.articles,
      {
        id: id.next(),
        title: state.title,
        summary: state.summary,
        display: "none"
      }
    ],
    title: "",
    summary: ""
  }));
};

The onClickAdd() method adds a new article to the articles state. This state value is an array. We use the spread...