Component with array of objects

array-component.js

import {h, Component} from 'composi'

const fruits = [
  {
    name: 'Apples', 
    quanity: 6
  },
  {
    name: 'Oranges', 
    quanity: 3,
  },
  {
    name: 'Bananas',  
    quanity: 2
  },
  {
    name: 'Strawberries', 
    quanity: 20
  }
]

const list = new Component({
  root: 'section',
  state: fruits,
  // Use map on array of fruits:
  render: (fruits) => (
    <ul>
      {
        fruits.map(fruit => (
            <li>
              <h2>Name: {fruit.name}</h2>
              <h3>Quantity: {fruit.quanitity}</h3>
            </li>
          )
        )
      }
    </ul>
  )
})

list.update()