React Service Layer

items-service.js

let listener = null;

export default {
  set listener(value) {
    listener = value;
    listener.state.items = [];
  },
  
  get all() {
    return listener.state.items;
  },
  
  set all(items) {
    listener.setState({ items });
  },
  
  add(value) {
    const items = this.items.slice();
    items.push(value);
    this.all = items;
  },
  
  remove(name) {
    this.all = this.items.filter(item => item.name !== name);
  },
}

LowLevel.js

import React, { Component, createElement } from 'react';
import items from './items-service.js';

function handleRemoveItem(name) {
  return () => {
    items.remove(name);
  };
}

export default props =>
  createElement(
    'div',
    null,
    createElement(
      'button',
      { onClick: handleRemoveItem(props.name) },
      'remove item'
    )
  );

Widget.js

import React, { Component, createElement } from 'react';
import items from './items-service.js';
import LowLevel from './LowLevel.js';

function handleAddItem() {
  items.add({ name: Math.random() });
}

export default class TopLevel extends Component {
  constructor(props) {
    super(props);
    
    this.state = {};
    service.listener = this;
  }
  
  render() {
    return createElement(
      'div',
      null,
      items.all.map(item => createElement(LowLevel, item)),
      createElement(
        'button',
        { onClick: handleAddItem },
        'add item'
      )
    );
  }
}