const {observable, action, computed} = mobx;

const {observer} = mobxReact;

​

@observer

class Country extends React.Component {

​

    @observable filterTermValue = '';

    @observable countriesList = [

      {'slug': 'amsterdam', 'name': 'Amsterdam'},

      {'slug': 'usa', 'name': 'United States'},

      {'slug': 'vienna', 'name': 'Vienna'}

    ];

​

    @computed get filtered() {

​

      let filteredList = this.countriesList.filter(

        t=>t.name.toLowerCase().indexOf(this.filterTermValue)>-1

      );

      return filteredList;

    }

​

    render() {

        return (

          <div>

              Term: <input placeholder="Start typing country"

                 onKeyUp={this.onChangeFilterTerm} />

​

              {this.filtered.map(country =>

                  <div key={country.slug}>

                    <p>{country.name}</p>

                  </div>

              )}

          </div>

        )

    }

​

​

    @action onChangeFilterTerm = (e) => {

        this.filterTermValue = e.target.value.toLowerCase();

    }

}

​

ReactDOM.render(

  <Country />,

  document.body

);

​

​