[JavaScript] Arrays.filter() [ 특정 값 or 배열만 남기고 싶을 때]

class App extends Component {
  constructor(props) {
    super(props);
    this.max_content_id = 3; 
    this.state = {
 
      mode:"create",
 
      subject: {title: 'WEB', sub: "World Wide Web!"},
      welcome: { title: "Welcome", sub: "Hello, React!" },
      
      
      selected_content_id : 2,
      
      contents: [
        {id:1, title:'HTML', desc:'HTML is HyperText ...'},
        {id:2, title:'CSS', desc:'CSS is Design ...'},
        {id:3, title:'JavaScript', desc:'HTML is JavaScript ...'},
      ]
    }
  }
 
  getReadContent() {
    return this.state.contents.filter(function (element) {
      if (element.id === this.state.selected_content_id) {
        return element;
      }
    }.bind(this))
  }
 
  getContent() {
    var _title, _desc, _article = null;
 
    if (this.state.mode === "welcome") {
      _title = this.state.welcome.title;
      _desc = this.state.welcome.sub;
      _article = <ReadContent title={_title} desc={_desc}></ReadContent>;
    } else if (this.state.mode === "read") {
      console.log(this.getReadContent());
      var _content = this.getReadContent();
      console.log(_content);
      _article = <ReadContent title={_content.title} desc={_content.desc}></ReadContent>
    } else if (this.state.mode === "create") {
      _article = <CreateContent
        onSubmit={function (_title, _desc) {
 
          this.max_content_id = this.max_content_id + 1;
 
          // this.state.contents.push(
          //   { id: this.max_content_id, title: _title, desc: _desc }
          // );
          var _contents = this.state.contents.concat(
            { id: this.max_content_id, title: _title, desc: _desc }
          )
 
          this.setState({
            // contents: this.state.contents
            contents: _contents
          })
        }.bind(this)}></CreateContent>
    } else if (this.state.mode === "update") {
      _article = <UpdateContent
        onSubmit={function (_title, _desc) {
 
          this.max_content_id = this.max_content_id + 1;
 
          // this.state.contents.push(
          //   { id: this.max_content_id, title: _title, desc: _desc }
          // );
          var _contents = this.state.contents.concat(
            { id: this.max_content_id, title: _title, desc: _desc }
          )
 
          this.setState({
            // contents: this.state.contents
            contents: _contents
          })
        }.bind(this)}></UpdateContent>
    }
    return _article;
  }
 
  render() {
    return (
      <div className="App">
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
          onChangePage={function () {
            this.setState({ mode: "welcome" });
          }.bind(this)}
        >
        </Subject>
        
        <TOC
          onChangePage={function (id) {
            this.setState({
              mode: "read",
              selected_content_id:Number(id)
            });
          }.bind(this)}
          data={this.state.contents}>
        </TOC>
 
        <Control onChangeMode={function (_mode) {
          this.setState({
            mode: _mode
          })
        }.bind(this)}></Control>
        
        {this.getContent()}
      </div>
    );
  }
}