import Component from 'inferno-component'
import h from 'inferno-hyperscript'

interface Props {
  clearCompleted: () => void
  clearAll: () => void
  leftCount: number
}
interface State {}

export default class Footer extends Component<Props, State> {
  leftCountText(count: number): string {
    if (count === 1) {
      return `${count} item left`
    } else {
      return `${count} items left`
    }
  }

  render() {
    return h('div', [
      h('span', this.leftCountText(this.props.leftCount)),
      h('button', { onClick: this.props.clearCompleted }, 'Clear completed'),
      h('button', { onClick: this.props.clearAll }, 'Clear lll')
    ])
  }
}

import Component from 'inferno-component'
import h from 'inferno-hyperscript'

interface Props {
  clearCompleted: () => void
  clearAll: () => void
  leftCount: number
}
interface State {}

export default class Footer extends Component<Props, State> {
  render() {
    return h('div', [
      h('span', `${this.props.leftCount} items left`),
      h('button', { onClick: this.props.clearCompleted }, 'Clear completed'),
      h('button', { onClick: this.props.clearAll }, 'Clear lll')
    ])
  }
}

--- 
+++ 
@@ -9,9 +9,17 @@
 interface State {}
 
 export default class Footer extends Component<Props, State> {
+  leftCountText(count: number): string {
+    if (count === 1) {
+      return `${count} item left`
+    } else {
+      return `${count} items left`
+    }
+  }
+
   render() {
     return h('div', [
-      h('span', `${this.props.leftCount} items left`),
+      h('span', this.leftCountText(this.props.leftCount)),
       h('button', { onClick: this.props.clearCompleted }, 'Clear completed'),
       h('button', { onClick: this.props.clearAll }, 'Clear lll')
     ])
Tweak left count text in Footer component
