How to pass props to react component that wrapped in variable

Question

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!

Answer 1

Try this:

function tableize (a) {
    let resultFn = {}
    Object.keys(a).forEach((k) => {
        // Uppercase "E" from Element
        let Element = a[k]
        resultFn[k] = function (data) {
            // Uppercase "E" from Element
            return (<Element data={data} />)
        }
    })
    return resultFn
}