How to use the inferno-mobx.connect function in inferno-mobx

render({ todos }) {
        return <main>
            <h1>todos</h1>
            <div>
                
                <section>
                    
                </section>
            </div>
        </main>
    }
}

// Render each item
const TodoItemWrapper = connect(props =&gt; (
    <ul>
        {props.todos.map(item =&gt; )}
    </ul>
))

export default Todos

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import Loading from '../components/common/Loading'

@connect(['store'])
class Logout extends Component {

  // When route is loaded (isomorphic)
  static onEnter({ state }) {
    state.common.title = 'Logout'
  }

  state = {
    loading: false
  }

  handleLogout = () => {
    const { store } = this.props
    const { router } = this.context

    this.setState({

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import Loading from '../components/common/Loading'
import Error from '../components/common/Error'

@connect(['state', 'store'])
class Login extends Component {

  // When route is loaded (isomorphic)
  static onEnter({ state }) {
    state.common.title = 'Login'
  }

  state = {
    username: '',
    password: '',
    loading: false,
    error: null
  }

  handleChange = (e) => {
    this.setState({

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import AddTodo from '../components/home/AddTodo'
import Todo from '../components/home/Todo'

@connect(['state', 'store'])
class Home extends Component {

  // When route is loaded (isomorphic)
  static async onEnter({ state, store }, params) {
    state.common.title = 'Home'
    await store.todos.browse()
  }

  render({ state }) {
    return (
      <main>
        <h1>todos</h1>
        <div>
          
          <section>
            <ul></ul></section></div></main>

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import Error from '../components/common/Error'

@connect(['state', 'store'])
class Register extends Component {

  // When route is loaded (isomorphic)
  static onEnter({ state }) {
    state.common.title = 'Register'
  }

  state = {
    username: '',
    password: '',
    errorMsg: null,
    loading: false
  }

  handleChange = (key) => (e) => {
    this.setState({ [key]: e.target.value })

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import TodoAdd from '../components/todos/TodoAdd'
import TodoItem from '../components/todos/TodoItem'

@connect(['todos'])
class Todos extends Component {

    // When route is loaded (isomorphic)
    static onEnter({ todos, common, params }) {
        common.title = 'Home'
        return todos.browse()
    }

    render({ todos }) {
        return <main>
            <h1>todos</h1>
            <div>
                
                <section>
                    
                </section></div></main>

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import { observable } from 'mobx'

@connect(['store'])
class AddTodo extends Component {

  @observable inputText = ''

  handleSubmit = async(e) => {
    e.preventDefault()
    const { store } = this.props
    await store.todos.add(this.inputText)
    this.inputText = ''
  }

  handleChange = (e) => {
    this.inputText = e.target.value
  }

  render() {

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'

@connect(['store'])
class Todo extends Component {
  render({ store, item }) {
    return (
      <li>
        <div>
          <label>{item.text}</label>
          <button> store.todos.remove(item)}/&gt;
        </button></div>
      </li>
    )
  }
}

export default Todo

import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'inferno-mobx'
import { Link } from 'inferno-router'

@connect(['store'])
class Menu extends Component {
  render({ store }) {
    return (
      <div>
        {store.account.isLoggedIn()
          ? 
          : }
      </div>
    )
  }
}

function LoggedInMenu() {
  return <menu>
    Browse
    About</menu>