title: mobX - Filter countries in react native?
body: <p>I have an array of 3 countries and a text input to filter them. If you type in the text input, it should check for what you typed against the country name, which should return the new filtered list of countries that match the filtered text. It should also display the inputted text next to <code>Typed Text:</code></p>
  
  <pre><code>import React, { Component } from 'react'
  import { View, Text, TextInput } from 'react-native'
  import { observable, action } from 'mobx';
  import { observer } from 'mobx-react/native'
  
  @observer
  export default class Country extends Component {
      @observable filterTermValue;
      @observable countriesList = [
        {'slug': 'amsterdam', 'name': 'Amsterdam'},
        {'slug': 'usa', 'name': 'United States'},
        {'slug': 'vienna', 'name': 'Vienna'}
      ];
  
      render() {
          return (
              &lt;View&gt;
                  &lt;Text&gt;Typed Text: {this.filterTermValue}&lt;/Text&gt;
                  &lt;TextInput placeholder="Start typing country"
                     value={this.filterTermValue}
                     onChange={this.onChangeFilterTerm} /&gt;
  
                  {this.countriesList.map(country =&gt;
                      &lt;View key={country.slug}&gt;
                        &lt;Text&gt;{country.name}&lt;/Text&gt;
                      &lt;/View&gt;
                  )}
              &lt;/View&gt;
          )
      }
  
      @action onChangeFilterTerm = (e) =&gt; {
          this.filterTermValue = e.target.value;
  
          this.countriesList.replace(this.countriesList.filter(el =&gt; el.name.toLowerCase().indexOf(this.filterTermValue.toLowerCase()) &gt; -1));
      }
  }
  </code></pre>
  
  <p>That's all the logic I have and I can't get it to work. The only thing that works is the country list loads the original array. Once I start typing in the input, the value is undefined and never prints, and the list is never filtered. I also tried <code>async</code> actions and <code>runInAction</code> I even tried computed to return the filtered list, but can't seem to get it to work.</p>
  
  <p>What is the right way to do this in mobX?</p>