HOF (High order fly => Function) x HOC (High Order Component)

ComponentFlyHigh.js

import YourComponent from 'your/path/Component'
/**
 * @name ComponentFly
 * @param {ReactElement} Component
 * @param {function} reduceParam
 * @return {ReactElement}
 * @example
 *  const ComponentFlying = ComponentFly(YourComponent)(reduceParam)
 *  Array.map(ComponentFlying)
 */
const ComponentFly = Component => reduceParam => (item, index) => (
  <Component {...reduceParam(item, index)} />
)

// define a function use as reduceParam
const reduceParam = ({ username, content }, key) => ({
  title: username, // title is props of component
  description: content, // description is props  of component
  key: key ? key : Math.floor(Math.random() * 999),
})

// ComponentFly(ComponentName)(Function)
const ComponentFlyHIGH = ComponentFly(YourComponent)(reduceParam)

const sampleData = [
  {username: 'ri7nz', content: 'Javascript on The Fly'},
  {username: 'ri666', content: 'Javascript is Devil'}
]
 
// Render to DOM with react-render
React.DOM(
  <>{sampleData.map(ComponentFlyHIGH)}<>,
  document.getElementById('where-u-want-2-render')
);