自动完成表单错误：未捕获的TypeError：data.match不是函数

Question

I am working with React and trying to figure out how to return data in an Autocomplete form from a JSON

this is the data

const falsyData = [{
    'Hello': {
      'what I do'       : 'you just say Hello',
      'which language'  : 'english'
    },
    'Travel': {
      'Etymology' : 'The origin of the word "travel" is...',
      'Purpose'   : 'include recreation'
    },
    'Gambling': {
      'Gamble'  : 'Gambling is the wagering of money...',
      'Origins' : 'Many popular games played in...'
    }
  }];

  render () {
    return (
      <Grid>
            <TextField
                onChange={this._onChange.bind(this)}
                onKeyUp={this._changeInput.bind(this)}
                value={this.state.value} />
            {!!this.state.value.length &&
              <Row>
                <Column>  
                 //HERE I PRINT THE RESULTS OF THE SEARCH
                  <p>{this.state.result}</p>
                </Column>                              
              </Row>
            }
      </Grid>
    );
  }

  _matchData = (input) => {
    let reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return falsyData.map(function(data) {
      if (data.match(reg)) {
        return data;
      }
    });
  }

  _changeInput = (val) => {
    let autoCompleteResult = this._matchData(this.state.value);
    if (autoCompleteResult.length) {
      this.setState({result: autoCompleteResult.join(' ')});
    };
  }

  _onChange = (event) => {
    this.setState({value: event.target.value});
  } 

I need to filter the data, lets say that the user types in A , so in <p>{this.state.result}</p> I want to see everything with the letter A .

For more specific: if the user types hello , I want to see hello from falsyData with their attributes and properties.

BTW

everytime I type in the search bar, this is what I get in the browser console

Uncaught TypeError: data.match is not a function

Answer 1

falsyData is an array of objects. In this block of code:

return falsyData.map(function(data) {
  if (data.match(reg)) {
    return data;
  }
});

You're mapping over objects, so data doesn't have a match function, because it isn't a string.

Depending on what you want to match on, change this to match string values within your objects. For example, if you just wanted to match on the outer object's key:

return falsyData.map(function(data) {
  for (var key in data) {
    if (key.match(reg)) {
      return key;
    }
  }
});