Uncaught TypeError: Cannot read property 'map' of undefined

Question

It is now in error if you try the following code, which is posted on the official site. Error Cause What?

http://mithril.js.org/mithril.component.html#nesting-components

var App = {
    ctrl: function() {
        return {data: [1, 2, 3]}
    },
    view: function(ctrl) {
        return m(".app", [
            //pressing the button reverses the list
            m("button[type=button]", {onclick: function() {ctrl.data.reverse()}}, "My App"),

            ctrl.data.map(function(item) {
                //the key ensures the components aren't recreated from scratch, if they merely exchanged places
                return m.component(MyComponent, {message: "Hello " + item, key: item})
            })
        ])
    }
}

var MyComponent = {
    controller: function(args) {
        return {greeting: args.message}
    },
    view: function(ctrl) {
        return m("h2", ctrl.greeting)
    }
}

m.mount(document.body, App)

Answer 1

Lol, wow. There's so many typos in the documentation; new ones found all the time xD

The App should have a controller, not ctrl

var App = {
  controller: function() {
      return {data: [1, 2, 3]}
  },