redux-like collection bindings

main.js

/*eslint-disable no-unused-vars*/
import React from 'react';
/*eslint-enable no-unused-vars*/
import ReactDOM from 'react-dom';

const connectCursor = (bindings) => {
  return (Component) => {
    return (props) => Component(bindings(props));
  };
}

const listData = [
  {
    type: 'cat',
    sound: 'pur',
    species: 'domestic'
  },
  {
    type: 'cat',
    sound: 'meow',
    species: 'siamese'
  },
  {
    type: 'cat',
    sound: 'meowww!',
    species: 'maine coon'
  }
];


const Cat = ({data}) => {
  return (
    <li>{data.breed} - {data.loudness}</li>
  );
}
const mapToCatApi = (props) => {
  let {data} = props;
  return {
    ...props,
    data: {
      breed: data.species,
      loudness: data.sound.length + 'decibels'
    }
  }
}
const CatWithBindings = connectCursor(mapToCatApi)(Cat);


const List = ({collecton, ChildComponent}) => {
  return (
    <ul>
      {collecton.map(data => ChildComponent({data}))}
    </ul>
  );
};


ReactDOM.render(
  <List collecton={listData} ChildComponent={CatWithBindings} />,
  document.getElementById('app')
);