I want to render table cell dynamically. Each cell is a React ponent. I'm trying to export these React ponents 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 ponents named element, not cellA, cellB, cellC. The function return element as jsx (in < /> tag) because I need to pass props to these React ponent. But I'm wrong.

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

Thank you!

I want to render table cell dynamically. Each cell is a React ponent. I'm trying to export these React ponents 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 ponents named element, not cellA, cellB, cellC. The function return element as jsx (in < /> tag) because I need to pass props to these React ponent. But I'm wrong.

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

Thank you!

• javascript
• reactjs

• Where is the data props e from? You didn't put data as parameter in function tableize(a) Is it working if you just use <element /> ? – Hana Alaydrus Commented Aug 9, 2017 at 5:33

2 Answers 2

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
}

It seem like what you want is a higher order ponent (HOC)

function wrapper(WrappedComponent) {
  return class extends React.Component {
    render() {
      // Wraps the input ponent in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}

Please read this https://facebook.github.io/react/docs/higher-order-ponents.html