Using .match() in ReactJS - match is not a function?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I'm trying to use match() to filter results from an array in React :

if (this.props.search) {

   tracks.filter(result => {

      return result.match(`/${this.props.search}/gi`);

   });

}

But I'm getting :

TypeError: result.match is not a function

Am I missing something really obvious here? It's been a long day :/

Example of tracks array :

0:

  active: 1

  artist: "CJ Bolland"

  date_added: "2019-01-03 05:08:10"

  date_modified: "2019-01-03 05:09:01"

  duration: "00:05:54"

  filename: "1546488490.mp3"

  id: 2

  in_playlist: false

  online: 1

  seconds: 354

  time_ago: "1 hour ago"

  title: "Sugar Is Sweeter (AVH Mix)"

  type: "track"

  user_id: 4



1:

  active: 1

  artist: "Cristoph"

  date_added: "2019-01-03 05:08:46"

  date_modified: "2019-01-03 05:10:01"

  duration: "00:06:34"

  filename: "1546488526.mp3"

  id: 3

  in_playlist: false

  online: 1

  seconds: 394

  time_ago: "1 hour ago"

  title: "Guffaz"

  type: "track"

  user_id: 3

**** EDIT ****
Here is a screen shot of what's happening after implementing Just code's solution (which is working fine here on SO, but not in React). As you can see, I'm logging 3 things, the original array, the search term and the filtered array, but the filtered array always returns empty.

enter image description here

edited Jan 3 at 6:17

asked Jan 3 at 5:30

spice

470313

what is tracks and what data is there in it?

– Just code
Jan 3 at 5:34

It's an associative array

– spice
Jan 3 at 5:36

can you share the sample data of tracks?

– Thinker
Jan 3 at 5:40

Just added it ;)

– spice
Jan 3 at 5:41

you are using match function to an object in your filter function

– Thinker
Jan 3 at 5:43

|
show 4 more comments

I'm trying to use match() to filter results from an array in React :

if (this.props.search) {

   tracks.filter(result => {

      return result.match(`/${this.props.search}/gi`);

   });

}

But I'm getting :

TypeError: result.match is not a function

Am I missing something really obvious here? It's been a long day :/

Example of tracks array :

0:

  active: 1

  artist: "CJ Bolland"

  date_added: "2019-01-03 05:08:10"

  date_modified: "2019-01-03 05:09:01"

  duration: "00:05:54"

  filename: "1546488490.mp3"

  id: 2

  in_playlist: false

  online: 1

  seconds: 354

  time_ago: "1 hour ago"

  title: "Sugar Is Sweeter (AVH Mix)"

  type: "track"

  user_id: 4



1:

  active: 1

  artist: "Cristoph"

  date_added: "2019-01-03 05:08:46"

  date_modified: "2019-01-03 05:10:01"

  duration: "00:06:34"

  filename: "1546488526.mp3"

  id: 3

  in_playlist: false

  online: 1

  seconds: 394

  time_ago: "1 hour ago"

  title: "Guffaz"

  type: "track"

  user_id: 3

enter image description here

edited Jan 3 at 6:17

asked Jan 3 at 5:30

spice

470313

what is tracks and what data is there in it?

– Just code
Jan 3 at 5:34

It's an associative array

– spice
Jan 3 at 5:36

can you share the sample data of tracks?

– Thinker
Jan 3 at 5:40

Just added it ;)

– spice
Jan 3 at 5:41

you are using match function to an object in your filter function

– Thinker
Jan 3 at 5:43

|
show 4 more comments

I'm trying to use match() to filter results from an array in React :

if (this.props.search) {

   tracks.filter(result => {

      return result.match(`/${this.props.search}/gi`);

   });

}

But I'm getting :

TypeError: result.match is not a function

Am I missing something really obvious here? It's been a long day :/

Example of tracks array :

0:

  active: 1

  artist: "CJ Bolland"

  date_added: "2019-01-03 05:08:10"

  date_modified: "2019-01-03 05:09:01"

  duration: "00:05:54"

  filename: "1546488490.mp3"

  id: 2

  in_playlist: false

  online: 1

  seconds: 354

  time_ago: "1 hour ago"

  title: "Sugar Is Sweeter (AVH Mix)"

  type: "track"

  user_id: 4



1:

  active: 1

  artist: "Cristoph"

  date_added: "2019-01-03 05:08:46"

  date_modified: "2019-01-03 05:10:01"

  duration: "00:06:34"

  filename: "1546488526.mp3"

  id: 3

  in_playlist: false

  online: 1

  seconds: 394

  time_ago: "1 hour ago"

  title: "Guffaz"

  type: "track"

  user_id: 3

enter image description here

edited Jan 3 at 6:17

asked Jan 3 at 5:30

spice

470313

I'm trying to use match() to filter results from an array in React :

if (this.props.search) {

   tracks.filter(result => {

      return result.match(`/${this.props.search}/gi`);

   });

}

But I'm getting :

TypeError: result.match is not a function

Am I missing something really obvious here? It's been a long day :/

Example of tracks array :

0:

  active: 1

  artist: "CJ Bolland"

  date_added: "2019-01-03 05:08:10"

  date_modified: "2019-01-03 05:09:01"

  duration: "00:05:54"

  filename: "1546488490.mp3"

  id: 2

  in_playlist: false

  online: 1

  seconds: 354

  time_ago: "1 hour ago"

  title: "Sugar Is Sweeter (AVH Mix)"

  type: "track"

  user_id: 4



1:

  active: 1

  artist: "Cristoph"

  date_added: "2019-01-03 05:08:46"

  date_modified: "2019-01-03 05:10:01"

  duration: "00:06:34"

  filename: "1546488526.mp3"

  id: 3

  in_playlist: false

  online: 1

  seconds: 394

  time_ago: "1 hour ago"

  title: "Guffaz"

  type: "track"

  user_id: 3

enter image description here

reactjs filter match

edited Jan 3 at 6:17

asked Jan 3 at 5:30

spice

470313

edited Jan 3 at 6:17

asked Jan 3 at 5:30

spice

470313

edited Jan 3 at 6:17

asked Jan 3 at 5:30

spice

470313

asked Jan 3 at 5:30

spice

470313

asked Jan 3 at 5:30

spice

470313

what is tracks and what data is there in it?

– Just code
Jan 3 at 5:34

It's an associative array

– spice
Jan 3 at 5:36

can you share the sample data of tracks?

– Thinker
Jan 3 at 5:40

Just added it ;)

– spice
Jan 3 at 5:41

you are using match function to an object in your filter function

– Thinker
Jan 3 at 5:43

|
show 4 more comments

what is tracks and what data is there in it?

– Just code
Jan 3 at 5:34

It's an associative array

– spice
Jan 3 at 5:36

can you share the sample data of tracks?

– Thinker
Jan 3 at 5:40

Just added it ;)

– spice
Jan 3 at 5:41

you are using match function to an object in your filter function

– Thinker
Jan 3 at 5:43

what is tracks and what data is there in it?

– Just code
Jan 3 at 5:34

It's an associative array

– spice
Jan 3 at 5:36

can you share the sample data of tracks?

– Thinker
Jan 3 at 5:40

Just added it ;)

– spice
Jan 3 at 5:41

you are using match function to an object in your filter function

– Thinker
Jan 3 at 5:43

|
show 4 more comments

1 Answer
1

active

oldest

votes

Seems that your regex is transformed to the string and the regex is not working properly,
You can do something like this, when it comes to string interpolation regexp object is always a handy.

return result.match(new RegExp(`${search}`,'gi'));

var tracks = [{

  artist: "CJ Bolland",

  title: "Sugar Is Sweeter (AVH Mix)"

}, {

  artist: "Cristoph",

  title: "Guffaz"

}];

var search = "sug";

var filtered = tracks.filter(result => {

  return result.artist.match(new RegExp(`${search}`, 'gi')) || result.title.match(new RegExp(`${search}`, 'gi'));

});

console.log(filtered);

edited Jan 3 at 6:03

answered Jan 3 at 5:43

Just code

10.5k53267

Can I apply this match to both the artist and title fields at the same time?

– spice
Jan 3 at 5:49

1

@spice yes check my edit you can use && or || as per your requirements

– Just code
Jan 3 at 5:51

Thanks bro. It's still not working though. I'm getting back an empty array for anything I search for. Could it be due to both the tracks array and the search string being props passed down from a parent? I didn't think .filter mutated though?

– spice
Jan 3 at 5:58

1

Yeah I know that doesn't really help. Oh well thanks for your help anyway. I'll figure it out. Now I know I was using match incorrectly that's got me a step closer anyway, so thanks again for pointing that out.

– spice
Jan 3 at 6:22

1

Doh! Found it.... I was using the AND operator instead of OR. That's why I wasn't getting any results. It's working now, and if ever there was a sign that I needed some sleep.... haha. Thanks again bro ;)

– spice
Jan 3 at 6:27

|
show 7 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016802%2fusing-match-in-reactjs-match-is-not-a-function%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Seems that your regex is transformed to the string and the regex is not working properly,
You can do something like this, when it comes to string interpolation regexp object is always a handy.

return result.match(new RegExp(`${search}`,'gi'));

var tracks = [{

  artist: "CJ Bolland",

  title: "Sugar Is Sweeter (AVH Mix)"

}, {

  artist: "Cristoph",

  title: "Guffaz"

}];

var search = "sug";

var filtered = tracks.filter(result => {

  return result.artist.match(new RegExp(`${search}`, 'gi')) || result.title.match(new RegExp(`${search}`, 'gi'));

});

console.log(filtered);

edited Jan 3 at 6:03

answered Jan 3 at 5:43

Just code

10.5k53267

Can I apply this match to both the artist and title fields at the same time?

– spice
Jan 3 at 5:49

1

@spice yes check my edit you can use && or || as per your requirements

– Just code
Jan 3 at 5:51

Thanks bro. It's still not working though. I'm getting back an empty array for anything I search for. Could it be due to both the tracks array and the search string being props passed down from a parent? I didn't think .filter mutated though?

– spice
Jan 3 at 5:58

1

Yeah I know that doesn't really help. Oh well thanks for your help anyway. I'll figure it out. Now I know I was using match incorrectly that's got me a step closer anyway, so thanks again for pointing that out.

– spice
Jan 3 at 6:22

1

Doh! Found it.... I was using the AND operator instead of OR. That's why I wasn't getting any results. It's working now, and if ever there was a sign that I needed some sleep.... haha. Thanks again bro ;)

– spice
Jan 3 at 6:27

|
show 7 more comments

Seems that your regex is transformed to the string and the regex is not working properly,
You can do something like this, when it comes to string interpolation regexp object is always a handy.

return result.match(new RegExp(`${search}`,'gi'));

var tracks = [{

  artist: "CJ Bolland",

  title: "Sugar Is Sweeter (AVH Mix)"

}, {

  artist: "Cristoph",

  title: "Guffaz"

}];

var search = "sug";

var filtered = tracks.filter(result => {

  return result.artist.match(new RegExp(`${search}`, 'gi')) || result.title.match(new RegExp(`${search}`, 'gi'));

});

console.log(filtered);

edited Jan 3 at 6:03

answered Jan 3 at 5:43

Just code

10.5k53267

Can I apply this match to both the artist and title fields at the same time?

– spice
Jan 3 at 5:49

1

@spice yes check my edit you can use && or || as per your requirements

– Just code
Jan 3 at 5:51

Thanks bro. It's still not working though. I'm getting back an empty array for anything I search for. Could it be due to both the tracks array and the search string being props passed down from a parent? I didn't think .filter mutated though?

– spice
Jan 3 at 5:58

1

Yeah I know that doesn't really help. Oh well thanks for your help anyway. I'll figure it out. Now I know I was using match incorrectly that's got me a step closer anyway, so thanks again for pointing that out.

– spice
Jan 3 at 6:22

1

Doh! Found it.... I was using the AND operator instead of OR. That's why I wasn't getting any results. It's working now, and if ever there was a sign that I needed some sleep.... haha. Thanks again bro ;)

– spice
Jan 3 at 6:27

|
show 7 more comments

Seems that your regex is transformed to the string and the regex is not working properly,
You can do something like this, when it comes to string interpolation regexp object is always a handy.

return result.match(new RegExp(`${search}`,'gi'));

var tracks = [{

  artist: "CJ Bolland",

  title: "Sugar Is Sweeter (AVH Mix)"

}, {

  artist: "Cristoph",

  title: "Guffaz"

}];

var search = "sug";

var filtered = tracks.filter(result => {

  return result.artist.match(new RegExp(`${search}`, 'gi')) || result.title.match(new RegExp(`${search}`, 'gi'));

});

console.log(filtered);

edited Jan 3 at 6:03

answered Jan 3 at 5:43

Just code

10.5k53267

Seems that your regex is transformed to the string and the regex is not working properly,
You can do something like this, when it comes to string interpolation regexp object is always a handy.

return result.match(new RegExp(`${search}`,'gi'));

var tracks = [{

  artist: "CJ Bolland",

  title: "Sugar Is Sweeter (AVH Mix)"

}, {

  artist: "Cristoph",

  title: "Guffaz"

}];

var search = "sug";

var filtered = tracks.filter(result => {

  return result.artist.match(new RegExp(`${search}`, 'gi')) || result.title.match(new RegExp(`${search}`, 'gi'));

});

console.log(filtered);

var tracks = [{

  artist: "CJ Bolland",

  title: "Sugar Is Sweeter (AVH Mix)"

}, {

  artist: "Cristoph",

  title: "Guffaz"

}];

var search = "sug";

var filtered = tracks.filter(result => {

  return result.artist.match(new RegExp(`${search}`, 'gi')) || result.title.match(new RegExp(`${search}`, 'gi'));

});

console.log(filtered);

var tracks = [{

  artist: "CJ Bolland",

  title: "Sugar Is Sweeter (AVH Mix)"

}, {

  artist: "Cristoph",

  title: "Guffaz"

}];

var search = "sug";

var filtered = tracks.filter(result => {

  return result.artist.match(new RegExp(`${search}`, 'gi')) || result.title.match(new RegExp(`${search}`, 'gi'));

});

console.log(filtered);

edited Jan 3 at 6:03

answered Jan 3 at 5:43

Just code

10.5k53267

edited Jan 3 at 6:03

answered Jan 3 at 5:43

Just code

10.5k53267

answered Jan 3 at 5:43

Just code

10.5k53267

answered Jan 3 at 5:43

Just code

10.5k53267

Can I apply this match to both the artist and title fields at the same time?

– spice
Jan 3 at 5:49

1

@spice yes check my edit you can use && or || as per your requirements

– Just code
Jan 3 at 5:51

Thanks bro. It's still not working though. I'm getting back an empty array for anything I search for. Could it be due to both the tracks array and the search string being props passed down from a parent? I didn't think .filter mutated though?

– spice
Jan 3 at 5:58

1

Yeah I know that doesn't really help. Oh well thanks for your help anyway. I'll figure it out. Now I know I was using match incorrectly that's got me a step closer anyway, so thanks again for pointing that out.

– spice
Jan 3 at 6:22

1

Doh! Found it.... I was using the AND operator instead of OR. That's why I wasn't getting any results. It's working now, and if ever there was a sign that I needed some sleep.... haha. Thanks again bro ;)

– spice
Jan 3 at 6:27

|
show 7 more comments

Can I apply this match to both the artist and title fields at the same time?

– spice
Jan 3 at 5:49

1

@spice yes check my edit you can use && or || as per your requirements

– Just code
Jan 3 at 5:51

Thanks bro. It's still not working though. I'm getting back an empty array for anything I search for. Could it be due to both the tracks array and the search string being props passed down from a parent? I didn't think .filter mutated though?

– spice
Jan 3 at 5:58

1

Yeah I know that doesn't really help. Oh well thanks for your help anyway. I'll figure it out. Now I know I was using match incorrectly that's got me a step closer anyway, so thanks again for pointing that out.

– spice
Jan 3 at 6:22

1

Doh! Found it.... I was using the AND operator instead of OR. That's why I wasn't getting any results. It's working now, and if ever there was a sign that I needed some sleep.... haha. Thanks again bro ;)

– spice
Jan 3 at 6:27

Can I apply this match to both the artist and title fields at the same time?

– spice
Jan 3 at 5:49

@spice yes check my edit you can use && or || as per your requirements

– Just code
Jan 3 at 5:51

Thanks bro. It's still not working though. I'm getting back an empty array for anything I search for. Could it be due to both the tracks array and the search string being props passed down from a parent? I didn't think .filter mutated though?

– spice
Jan 3 at 5:58

Yeah I know that doesn't really help. Oh well thanks for your help anyway. I'll figure it out. Now I know I was using match incorrectly that's got me a step closer anyway, so thanks again for pointing that out.

– spice
Jan 3 at 6:22

Doh! Found it.... I was using the AND operator instead of OR. That's why I wasn't getting any results. It's working now, and if ever there was a sign that I needed some sleep.... haha. Thanks again bro ;)

– spice
Jan 3 at 6:27

|
show 7 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu