I want to render table cell dynamically. Each cell is a React component. I'm trying to export these React components as a wrap function.

For example:

import cellA from './cellA'

import cellB from './cellB'

import cellC from './cellC'



let content = { cellA, cellB, cellC }



function tableize (a) {

    let resultFn = {}

    Object.keys(a).forEach((k) => {

        let element = a[k]

        resultFn[k] = function (data) {

            return (<element data={data} />)

        }

    })

    return resultFn

}



export default tableize(content)

The problem is on this line:

return (<element data={data} />)

The result is browser render list of React components named element, not cellA, cellB, cellC. The function return element as jsx (in < /> tag) because I need to pass props to these React component. But I'm wrong.

How to pass props to this React component that wrapped in a variable?

Thank you!