Component Pojo Add Item

24 September 2020 by osban

Level: beginner • Mithril.js Version: latest

component m.mount oninit pojo state

This is an example how to use component state with plain old JavaScript objects (POJO). State can be accessed via the vnode.state property, which is available to all lifecycle methods as well as the view method of a component.

Live Example #

JavaScript #

const app = {
  oninit: v => {v.state.els = ["first item"]},
  view: v => [
    m('button', {
      onclick: () => v.state.els.push('another item')
    }, 'add item'),
    m('ul', v.state.els.map(x => m('li', x)))
  ]
}

m.mount(document.body, app)

The snippet is using the most current version of Mithril.js framework. It is aimed at beginners and shows some basic recipes.

In addition to the Mithril.js hyperscript function m(), here we can see an example of Mithril.js' m.mount API method. It also shows, how Mithril.js' lifecycle methods can be used. This can be seen here by using the oninit hook.

The example was contributed by osban and last modified on 24 September 2020. Click here to see more examples contributed by the author.

Contribute #

If anyone has some improvements, that should be addressed, let me know by opening an issue. Or simply fork the repository on GitHub, push your commits and send a pull request. For starting your work, you can click the edit link below. Thanks for contributing.

See more code examples  •  Edit this example on GitHub