Configuring State

As previously mentioned, Metal components automatically respond to the data passed to them and rerender. For a component to take advantage of this behavior, however, it needs to be told what data to respond to. This is where state comes in.

JSX components have two state managers, one for internal state (STATE), and one for external properties that are passed down to it (PROPS).

Soy components on the other hand only have one state manager that is used for both internal and external properties (STATE).

Storing The Todos

Let's configure the TodoApp component to store an array of todos with a default value:

// TodoApp.js

class TodoApp extends Component {
    ...
}

TodoApp.STATE = {
    todos: {
        // Default value
        value: [
            {
                done: false,
                title: 'Todo 1'
            },
            {
                done: false,
                title: 'Todo 2'
            }
        ]
    }
};

Now that there is a default value set, you can access the value in the Soy template after defining it as a soy param:

{namespace TodoApp}

/**
 * This renders the component's whole content.
 */
{template .render}
    {@param? todos: ?}

    <div>Todo: {$todos[0].title}</div>
&#123;/template&#125;

Which results in the following markup:

<div>Todo: Todo 1</div>

Obviously, this markup isn't very useful. We'll get to rendering the entire list in a minute.

Item

The TodoItem component will need two properties defined in STATE: one for keeping track of it's index inside the list and one for containing the todo data itself:

// TodoItem.js

class TodoItem extends Component {
    ...
}

TodoItem.STATE = {
    index: {
        value: null
    },

    todo: {
        value: null
    }
};

These STATE properties will act as read-only for the TodoItem component, as the values will always be defined by the parent component and passed down.

Form

The TodoForm only needs one property that will eventually be used to keep track of the value of it's input:

// TodoForm.js

class TodoForm extends Component {
    ...
}

TodoForm.STATE = {
    value: {
        value: ''
    }
};