Javascript React.js <Uncaught TypeError: filter.match is not a function>になるのは何故でしょうか

Question

前提・実現したいこと

React.js Javascriptの初心者です。
検索した文字をフィルターファンクションで、配列関数とマッチするもを、フィルタリングさせたいと思っています。

別のコンポーネントにある、配列から、nameと、inputからゲットしたvalueがマッチする場合に、そのマッチするコンポーネントを呼び出す、ファンクションを作りたいと思っております。
しかし、Uncaught TypeError: filter.match is not a functionのエラーが発生し、原因がわからずに途方に暮れています。

return filter.match(elem.name)の部分が何か間違えているのか、タイプミスではないと思うのですが、何が原因なのか教えていただけませんでしょうか。よろしくお願いいたします。

発生している問題・エラーメッセージ

Uncaught TypeError: filter.match is not a function

該当のソースコード

import React, { Component } from 'react';
import { render } from 'react-dom';

import StyleguideModal from './StyleguideModal';

/* Styleguide Application */

class Search extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      textLists: props.textLists,
      search:"",
      elements:[]
    };
  }

  handleSearch(e) {
      var filter = new RegExp(e.target.value);
      var newState = {};
      newState.search = e.target.value;
      newState.elements = this.props.textLists.filter(function(elem) {
          return filter.match(elem.name)
      });
      this.setState(newState);
    }

  componentDidMount() {
          $(document).foundation();
  }

  renderItem(text) {
      return (
        <div className="margin-bottom-4 small-6 medium-4 large-2 columns card-wrap">
          <a className="itemLink" data-open="Style-Modal">
            <div className="radius bordered shadow card">
              <img className="style-tmb-s" src={text.thumbnail} />
              <div className="card-section">
                <p>{text.name}</p>
              </div>
            </div>
          </a>
        </div>
      )
  }

  renderImges(text) {
      return (
        <div>
          <img src={text.image} />
        </div>
      )
  }


render() {

        return (
          <div  className="wrap">
            <SearchFilter options={this.props.textLists.map(function(elem) {
              return elem.name } ) } search={this.state.search} onChange={this.handleSearch.bind(this)} />
          <div className="main-wrap">
            <div className="result-wrap">
              <div className="large-12.columns">

                  <div className="small-9 large-10 columns padding-top-3 result-wrap">


                    <StyleguideOverlay textLists={this.props.textLists} />

                    <div className="row">
                      <div className="margin-bottom-1 small-12 medium-12 large-12 columns title-wrap">
                        <i className="fi-magnifying-glass"></i>
                        <h3 className="title">Icons</h3>
                      </div>
                    </div>



                    <div className="row items-wrap">
                      { this.state.elements.map(function(elem) { return this.renderImages(elem) }) }
                      { this.state.elements.map(function(elem) { return this.renderItems(elem) }) }
                    </div>
                  </div>
              </div>
            </div>
          </div>


          </div>

          );
    }
}

class StyleguideOverlay extends React.Component {

    renderText(text) {
      return (
          <div>
          <div className="tabs-panel is-active" id="panel1">
            <pre>
              <code>
                {text.sourceTypeA}
              </code>
            </pre>
          </div>
          <div className="tabs-panel" id="panel2">
            <pre>
              <code>
                {text.sourceTypeB}
              </code>
            </pre>
          </div>
        </div>
      )
  }

    render() {
        return (
            <div className="reveal row" id="Style-Modal" data-reveal>
                    <div className="Style-Modal-inner columns small-12">

                      <ul className="tabs" data-tabs id="example-tabs">
                        <li className="tabs-title is-active">
                          <a href="#panel1" aria-selected="true">HTML</a></li>
                        <li className="tabs-title"><a data-tabs-target="panel2" href="#panel2">source B</a></li>
                      </ul>

                      <div className="tabs-content" data-tabs-content="example-tabs">
                        {this.props.textLists.map(this.renderText)}
                      </div>

                      <button className="close-button" data-close aria-label="Close modal" type="button">
                      </button>
                    </div>
                  </div>
        )

      }
}

class SearchFilter extends React.Component {

    render() {
        return (
            <div className="large-12.columns header">
        <div className="row head-nav" id="responsive-menu">
          <div className="small-7 large-7 columns search-rap">
            <div className="small-12 large-12 columns" id="header">

              <div className="input-group search-from-wrap">
                <input type="text" className="padding-lest-3 form-control _keyword border-radius-s" onChange={this.props.onChange}
                  value={this.props.search}
                  name="search"
                  placeholder="what are you searching?"
                  autoComplete="on" list="stylesuggest" />
                  <datalist id="stylesuggest">
                    { this.props.options.map(function(option) {
                        return (<option value={option} />)
                    }) }
                    </datalist>
                <div className="search-icon-rap" >
                  <i className="fi-magnifying-glass"></i>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>

        )
    }

}

export default Search;

  constructor(props) {
    super(props);
    this.state = {
       textLists: [
        { thumbnail: 'images/styleguide/style-guide-thumbnail-list_icon-add-project.png', name:'Cancel Button', sourceTypeA:'<i class="fi-heart"></i>', sourceTypeB:'sourceB'},
        { thumbnail: 'images/styleguide/style-guide-thumbnail-list_icon-already-checked.png', name:'Already checked', sourceTypeA:'<i class="fi-heart"></i>', sourceTypeB:'sourceB'},
        { thumbnail: 'images/styleguide/style-guide-thumbnail-list_icon-calendar.png', name:'Calendar', sourceTypeA:'<i class="fi-heart"></i>', sourceTypeB:'sourceB'},
        { thumbnail: 'images/styleguide/style-guide-thumbnail-list_icon-cause-effect.png', name:'Cause & effect', sourceTypeA:'<i class="fi-heart"></i>', sourceTypeB:'sourceB'},
      ]
    };
  }

Answer 1

原因

const target = { name: 'Cancel Button' };

const pattern = new RegExp('Cancel');

// TypeError: filter.match is not a function
pattern.match(target.name)

まず、掲載されているコードの問題箇所を簡易的なコードに書き直すと上記のようになります。
filter.match is not a functionというエラーの意味はそのままで、「filter.matchは関数ではない」、別の言い方をすると「filter.matchという関数は存在しない」ということです。

このようなエラーを見た場合、とりあえず確認しておきたいのが、「new RegExp()によって生成されるオブジェクトには、どのようなメソッドが実際はあるのか？」というところになるかと思います。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp

上記リンク先の「メソッド」のセクション以下を見ると、matchというメソッドは用意されていないことがわかります。

exec
その文字列のパラメータでのマッチのための検索を実行します。
test
その文字列のパラメータでのマッチのためのテストをします。
toSource
特定のオブジェクトを表すオブジェクトリテラルを返します。 この値は新しいオブジェクトを生成するために使うことができます。Object.prototype.toSource メソッドを上書きします。
toString

では、matchメソッドというのはJavaScriptに存在しないのかというと、そういうわけでもなく、matchメソッドはString型のオブジェクトのメソッドとして存在しています。

str.match(regexp)
正規表現に対する文字列 のマッチングの際に、そのマッチ結果を得るために使われます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match

ということで、原因は以上です。

解決策の一例

const target = { name: 'Cancel Button' };

const pattern = new RegExp('Cancel');

// [ 'Cancel', index: 0, input: 'Cancel Button' ]
console.log(target.name.match(pattern))

// false
console.log(pattern.test(target.name)) 

// [ 'Cancel', index: 0, input: 'Cancel Button' ]
console.log(pattern.exec(target.name))

追記

const pattern = new RegExp('a');
const str = 'a';

console.log(typeof pattern) // object
console.log(typeof str) // string

console.log(pattern.match) // undefined
console.log(str.match) // [Function: match]

// TypeError: pattern.match is not a function
// console.log(pattern.match(str)); 

// [ 'a', index: 0, input: 'a' ]
console.log(str.match(pattern)); 

この追加のコードと、元の回答にある説明を読んで、何が原因でエラーが起きているのかが分かると良いのですが。

Comments

[hitominjar]

ご回答ありがとうございます＞＜
まだ完全に理解できていないのですが、私の理解できていないポイントは下記です＞＜

＞ matchメソッドはString型のオブジェクトのメソッドとして存在しています。
配列の内容も、valueも「String型のオブジェクト」だと思うのですが、違うのでしょうか。。。
文字列になっていないから、エラーになっているという事でしょうか？

[HayatoKamono]

私が掲載した原因版と解決策版と のコードの方は実行して動作確認はされましたか？また、リンク先の各URLの内容は読まれましたでしょうか？そこを踏まえて必要であれば改めてより具体的に質問頂ければと思います。

[hitominjar]

もちろん、動作確認してリンク先の内容も読みました。多分私の理解力が低すぎるのでイマイチ、今回のポイントが掴めていないのだと思います。。。ご丁寧にご回答いただいてありがとうございます。もう少し熟読して、わかるまでトライしてみます。ありがとうございます。

[HayatoKamono]

原因を示した3行のコードとそれ以下の説明から、何が原因で該当のエラーが発生するかが、まだ尚理解出来ていないということですか？その場合、コメント欄で頂いていた追加の質問をより具体的に頂ければ、何が分からないかが伝わってくるかとは思います。

[hitominjar]

追記ありがとうございます＞＜
こういう解釈であってますでしょうか＞＜

const pattern = new RegExp('a');
const str = 'a';

console.log(typeof pattern) // object
// means pattern の data型 = object

console.log(typeof str) // string
// means　str の data型 = string(文字列)

console.log(pattern.match) // undefined
// object　だから undefined
// should be string

console.log(str.match) // [Function: match]
// TypeError: pattern.match is not a function
// console.log(pattern.match(str));
// 何とマッチするのか書いてないからエラー？

// [ 'a', index: 0, input: 'a' ]
console.log(str.match(pattern));
//means strとpatternがマッチすればコンソールログに出力

[hitominjar]

今わかりました！！
<string>.match(<RegExp>)　にしないといけないところを、 <RegExp>.match(<string>)になっていたからなんですね！

[HayatoKamono]

お、良かったです！そういうことです！！！