Manage State using Simple Variables

19 October 2021 by kevinfiol

Level: intermediate • Mithril.js Version: latest

component m.mount state

In Mithril.js you are free to structure your state data however you'd like, and Mithril.js takes care of the rest. Below is an example of a simple Counter application written with Mithril.js.

Live Example #

JavaScript #

let count = 0;

const App = {
  view: () =>
    m('div',
      m('h1', 'Counter'),
      m('p', count),
      m('button', { onclick: () => count += 1 }, '+'),
      m('button', { onclick: () => count -= 1 }, '-')
    )
};

m.mount(document.body, App);

In this example the state is just a single primitive variable! For small applications, simple widgets or one-off UI components, the above solution is largely sufficient.

The snippet is using the most current version of Mithril.js framework. It is aimed at intermediate users who are familiar with most of the aspects of the framework.

In addition to the Mithril.js hyperscript function m(), here we can see an example of Mithril.js' m.mount API method.

The example was contributed by kevinfiol and last modified on 19 October 2021. 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