Cacher is the code snippet organizer for pro developers

import React, { Component } from "react";
import Subject from "./Subject";
import TOC from "./TOC";
import ReadContent from "./ReadContent";
import Control from "./Control";
import CreateContent from "./CreateContent";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.max_content_id = 3;
    this.state = {
      mode: "welcome",
      selected_content_id: 0,
      subject: { title: "WEB", sub: "world wide web!" },
      welcome: { title: "Welcome", desc: "Hello, React!!!" },
      contents: [
        { id: 1, title: "HTML", desc: "HTML is HyperText ..." },
        { id: 2, title: "CSS", desc: "CSS is for Design ..." },
        {
          id: 3,
          title: "Javascript",
          desc: "Javascript is for interactive ..."
        }
      ]
    };
  }

  render() {
    var _title,
      _desc,
      _article = null;

    if (this.state.mode === "welcome") {
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
      _article = <ReadContent title={_title} desc={_desc} />;
    } else if (this.state.mode === "read") {
      const selectedItem = this.state.contents.filter(
        content => this.state.selected_content_id === content.id
      );

      if (selectedItem.length > 0) {
        _title = selectedItem[0].title;
        _desc = selectedItem[0].desc;
      }

      _article = <ReadContent title={_title} desc={_desc} />;
    } else if (this.state.mode === "create") {
      _article = (
        <CreateContent
          onSubmit={function(_title, _desc) {
            this.max_content_id += 1;
            const contents = this.state.contents.concat({
              id: this.max_content_id,
              title: _title,
              desc: _desc
            });

            console.log(contents);
            this.setState({
              contents
            });
          }.bind(this)}
        />
      );
    }

    return (
      <div className="App">
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
          onChangePage={function() {
            this.setState({ mode: "welcome" });
          }.bind(this)}
        />
        <TOC
          onChangePage={function(id) {
            this.setState({ mode: "read", selected_content_id: id });
          }.bind(this)}
          data={this.state.contents}
        />
        <Control
          onChangeMode={function(mode) {
            this.setState({
              mode
            });
          }.bind(this)}
        />
        {_article}
        {/* {this.state.contents.map(content => (
          <Content key={content.id} title={content.title} desc={content.desc} />
        ))} */}
      </div>
    );
  }
}