#Introduction

In this lab you'll add `city` and `category` properties.

#Steps

??Define a city_ property

Add a `city_:''` config. 

As you know, this creates a get/set property.

Save your changes, then in the Chrome debugger's app-worker context
get a reference to the filter component and confirm that the property
exists.

Is the property there? This statement should evaluate to '' (and not undefined).

    Neo.findFirst({ntype:'yelp-filter'}).city

Assign a value.

    Neo.findFirst({ntype:'yelp-filter'}).city = 'Madison'

Read the value. This should evaluate the city you assigned above.

    Neo.findFirst({ntype:'yelp-filter'}).city

None of this is very surprising yet. The `city` property would behave
the same whether it was a simple property or a get/set property.


??Detect when `city` changes

We need a function to be run when the city property changes. Later,
we'll use that function to update the text field.

How do you detect a change to a get/set property? Via its `afterSet...`
method!

Add that method, with a single statement that logs the passed value.

<pre class="runnable readonly text 320">
import Base from '../../../../node_modules/neo.mjs/src/container/Base.mjs';
import TextField from '../../../../node_modules/neo.mjs/src/form/field/Text.mjs';
class Filter extends Base {
    static config = {
        ...
    }

    afterSetCity(city) {
        console.log(city);
    }
}

Neo.setupClass(Filter);

export default Filter;
</pre>

??Test the filter on the command line

Use the debugger's console (in the app worker context) and verify that
you see the value logged. In other words, runing the following should result
in `afterSetCity()` being run.

    Neo.findFirst({ntype:'yelp-filter'}).city = 'Madison'


??Add a `category` get/set

Now add a `category_:'',` config, and a corresponding `afterSetCategory()`
method. The code will be almost identical to what you did for city.

Test your code by setting and getting `category` on the command line.

    Neo.findFirst({ntype:'yelp-filter'}).category

    Neo.findFirst({ntype:'yelp-filter'}).category = 'pizza'

    Neo.findFirst({ntype:'yelp-filter'}).category

You should see the value updating and the value being logged.
