#Introduction

In this lab you'll udpate the text fields as the properties change.

#Steps

??Add `reference` to the fields

First, add a `reference:'city',` to the city field config
and `reference:'category',` to the category field.

As you recall from lecture, `reference` is used in component
or controller methods to get a reference to the field via
`this.getReference()`.

??Update the city field
You already have an `afterSetCity()` method.

Modify it to udpdate the city.

    this.getReference('city').value = city;

If you save and run the code you get a runtime error!
That happens because when the value is first applied (to assign
the initial defined in `city_:'',`) the view hasn't
been rendered yet! `Neo.component.Base` has a `rendered` property.
We need a statement to test that. Add this statement before 
you assign the city to the field.

    if (!this.rendered) return;

<pre style="border: thin solid gray; padding: 8px; color: lightgray; font-size:14pt;">
import Base from '../../../../node_modules/neo.mjs/src/container/Base.mjs';
import TextField from '../../../../node_modules/neo.mjs/src/form/field/Text.mjs';
import Function from '../../util/Function.mjs';
class Filter extends Base {
    static config =  {
        className: 'Yelp.view.businesses.Filter',
        ntype: 'yelp-filter',

        city_: '',
        category_: '',

        layout: { ntype: 'hbox' },
        itemDefaults: {module: TextField, clearable: true,},
        items: [
            ...
        ]
    }
    afterSetCity(city) {
        console.log(city);
        <span style="color:#b91010;">if (!this.rendered) return;
        this.getReference('city').value = city;</span>
    }
    afterSetCategory(category) {
        console.log(category);
    }
}

Neo.setupClass(Filter);

export default Filter;
</pre>

??Test the code

In the Chrome debugger update the city property. You should see the
text field update to reflect the change.

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

??Add the same logic for category

Modify the `afterSetCategory()` method to work like the after city method.

Test it in the Chrome debugger. You should see the category text field updating.

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

??Notice a timing issue

Currently, the initial city and category are just empty strings.
But if there had some other values we'd want the city and category
text fields to reflect those values as we start the app.

For example, change the city and category like this:

    city_: 'Madison',
    category_: 'pizza',

Upon refresh these values are _not_ seen in the fields, but you _will_
see the values in the Crome debugger 

    console.log(Neo.findFirst({ntype:'yelp-filter'}).city); // Logs "Madison"

The initial values _are_ assigned, and the `afterSet...` methods are run, 
but since the view hasn't been rendered the `after` methods can't initialize
the fields.

??Fix the issue

We need to detect when the view is rendered, then update
the text fields to their initial values. 

Since `Neo.component.Base` has a `mounted` get/set,
there's a corresponding `afterSetMounted()` method. We'll add the code
there.

Use the following code. Note the 20ms delay. That's there because
after a view is mounted, the DOM may not update until one "frame" 
later, which is about 18ms. 

    afterSetMounted() {
        // Wait for one "frame" using a framerate of 60 per second = 17.7 ms
        setTimeout(() => {
            this.afterSetCity(this.city);
            this.afterSetCategory(this.category);
        }, 20);
    }

Save and refresh. You should see the new default values as the initial
values for the city and category text fields.

??Make sure `city` and `category` have their normal default values

Change city and category back to their normal default values.

    city_: '',
    category_: '',

In an upcoming lab we'll use another method of initializing the city and category.
