Display an array

[RudmanMario]

I have a simple problem. I can't find solution for displaying an array of <th> elements. I hava a component with render something like this:

render: function() {
    var thOne = <th ref="one">foo</th>;
    var thTwo = <th ref="two">bar</th>;
    var array = [];
    array.push(thOne);
    array.push(thTwo);
    return (
        array.map(function(cell) {
            return (cell);
        }
    )
}

This type of return doesn't work. Wrapping it in <div> in no good because I'm breaking table structure and then I have lots of warnings. So if I have an array of <th> elements and I don't want to wrap them in

how can I display them?

[bloodyowl]

render itself can output a single element.

you've got 2 solutions :

• return the cells in the parent tr
• not making it a composite component, just a function returning a reactFragment

function renderCells(parent, params) {
  return React.createFragment({
    // ref callback API makes it possible to add refs to a parent composite component
    one: <th ref={(c) => parent._one = c}>{params.foo}</th>,
    two: <th ref={(c) => parent._two = c}>bar</th>,
  })
}

// and in the parent component

render() {
  return (
    <tr>
      <td>other td</td>
      {renderCells(this, this.props)}
    </tr>
  )
}

[RudmanMario]

Thanks for your fast response. I was afraid that it cannot be done like I wanted to. I'll try to implement your solution, thanks.

[iamdustan]

Also want to point out that browsers automatically add tbody’s where necessary which can cause React to stumble. There’s not enough code here to see if you have that issue as well.

[RudmanMario]

Yes, I've noticed that and in my case there is no problem with that fact. But, thanks for suggestion.

[zpao]

I'm going to close this and point you to #2127 (feel free to subscribe, discuss more there). This is definitely a known limitation of how React currently works.