React with Baobab

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
  branch,
  root,
} from 'baobab-react/higher-order';
import Baobab from 'baobab';

const state = new Baobab({
  title: 'Foobar',
  colors: ['yellow', 'blue', 'red', 'brown']
});

const addColor = function addColor(state, color) {
  return state.push('colors', color);
};

const Title = branch(function Title(props) {
  function componentDidMount() {
    props.actions.addColor('green');
  }
  function render() {
    return (
      <div>
        <h1>{ this.props.title }</h1>
        <ul>{ this.props.colors.map(renderList) }</ul>
      </div>
    );
  }
  function renderList(value, key) {
    return <li key={key}>{value}</li>;
  }
  return { props, render, componentDidMount };
}, {
  cursors: {
    title: ['title'],
    colors: ['colors']
  },
  actions: { addColor }
});

const Application = root(function Application(props) {
  function render() {
    return <Title />;
  }
  return { props, render };
}, state);

ReactDOM.render(<Application />, document.body);

line 36
Each cursor needs to be a list.

Thanks!