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 JSXComponent {
    ...
}

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 render function using this.state:

// TodoApp.js

class TodoApp extends JSXComponent {
    render() {
        return (
            <div>Todo: {this.state.todos[0].title}</div>
        );
    }
}

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 PROPS: one for keeping track of it's index inside the list and one for containing the todo data itself:

// TodoItem.js

class TodoItem extends JSXComponent {
    ...
}

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

    todo: {
        value: null
    }
};

Remember that PROPS are used for external data, or data that is passed to the component from a parent. Therefore these values will be read-only for the TodoItem component.

Form

The TodoForm only needs one property that will only ever be set internally, therefore it's set on STATE:

// TodoForm.js

class TodoForm extends JSXComponent {
    ...
}

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