Filter array using regex in React.js?

Question

I want to be able to check and see which keys start with the letters "gra" and only return that content. I've tried a few things with the code below. In one approach I added something like {key.match(/gra/g)} in the return html but it is not very efficient (and still outputs blank content). I've also tried adding something like this:

  if(String(this.props.profile[key]).match(/gra/g)))

also tried:

  if(this.props.profile[key].match(/gra/g))

but keep getting errors like ".match" is not a function or can't read undefined, etc. I've tried various other ways but can't seem to get it working right.

   var grapes = Object.keys(this.props.profile).map(function(key) {
        if(this.props.profile[key] !=null) {
                return (
                     <li key={key} className="example-class">
                         <label>{key}:</label>{ this.props.profile[key] }
                      </li>
                  );
              }
    }, this);


    <html>
       {grapes}
    </html>

So, all that to say, what is the best way to filter using regex for something like this?

adeneo · Accepted Answer · 2016-01-22 15:14:19Z

2

Why not just filter the array

var grapes = Object.keys(this.props.profile)
                   .filter(function(key) {
                       return key && key.toLowerCase().indexOf('gra') === 0;
                   })
                   .map(function(key) {
                       return (
                         <li key={key} className="example-class">
                             <label>{key}:</label>{ this.props.profile[key] }
                         </li>
                       );
                   }, this);

edited Jan 22, 2016 at 15:14

answered Jan 22, 2016 at 15:10

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Michael Sebastian Over a year ago

hmm yeah hadn't thought of that. is "indexOf" similar to a .match()? just curious. thanks

adeneo Over a year ago

indexOf is not similar to match, but it does look for strings in strings, so str.indexOf('gra') === 0 is true if the string starts with gra

Wiktor Stribiżew Over a year ago

A regex is better if you need case-insensitive check.

adeneo Over a year ago

If you just want the first one, you don't really have to map them, just shift of the first one, something like this -> jsfiddle.net/kvbfnrb7

adeneo Over a year ago

Anything is possible, something like this then -> jsfiddle.net/kvbfnrb7/2

|

Collectives™ on Stack Overflow

Filter array using regex in React.js?

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related