functional React

functionalReact.js

"use strict";

function ReactFunctor(tag,attr,props,children){
  let classArgs = { 
      render : function render() {
          return React.createElement(tag,this.props,this.props.children);
      } 
  };
  if (props !== null) Object.assign(classArgs,props);
  return React.createElement(React.createClass(classArgs),attr,children);
};

var candidates = [
  { id: 44, firstName: 'barrack', lastName: 'obama' }, 
  { id: 43, firstName: 'george', lastName: 'bush' },
  { id: 42, firstName: 'bill', lastName: 'clinton' },
  { id: 45, firstName: 'hillary', lastName: null },
  { id: 40, firstName: 'ronald', lastName: 'reagan' }
];

function candidateParser(item){
 
 let curriedFunctor = R.curry(ReactFunctor),
 fetchName = R.pipe(R.props(['firstName','lastName']),R.join(' '),R.trim,R.toUpper),
 fetchArgs = R.compose(R.assoc('key',R.__,{href : '#',className : 'collection-item'}),(R.prop('id')));
 R.converge(curriedFunctor,[f=>'a',fetchArgs,f=>null,fetchName])(item);
}




var outElement = ReactFunctor('div',{className : 'collection', id:'target'},null,candidates.map(candidateParser));

ReactDOM.render(outElement,mountNode);

Updated to provide better method of extending ReactFunctor output element.

Added rambda