React like a pro

first.jsx

import React from 'react'

export default (props) => (<div>{props.myText}</div>)

second.jsx

import React from 'react'
import First from './first.jsx'

export default (props) => ({[1,2,3].map((el) => (<First myText={el}>))})

First

const html = require('choo/html')
const assert = require('assert')

module.exports = function first (myText) {
  assert.equal(typeof myText, 'number')
  return html`<div>${myText}</div>`
}

Second

const html = require('choo/html')
const assert = require('assert')
const First = require('./first')

// make sure when mounting in the view, there's a single root node - not multiple; else
// `hyperx` will complain
module.exports = function second (myText) {
  assert.equal(typeof myText, 'number')
  return [ 1, 2, 3 ].map((el) => {
    return First(el)
  })
}