Display list of React Components into a table - reactjs

Question

I have a React component called Widget and I want to display a list of widgets as a table.
Let's say the array of widgets looks like A, B, C, D, E, F, G and I will allow up to 3 TD per Table Row. So the result will look like the following.
A B C
D E F
G
Although the simple line skip can be done with css by using Ul but I have to us e a table for header labels.
I tried making the original array into list of arrays like [[A,B,C], [D,E,F], [G]]:
{
chunkedPartsArray.map((chunk, ind) => {
return (<tr>
{
chunk.map((obj, ind) => {
return {obj}
})
}
</tr>)
})
}
The above code gives me the following warning
Uncaught Error: Objects are not valid as a React child (found: object with
keys {obj}). If you meant to render a collection of children, use an array
instead or wrap the object using createFragment(object) from the React add-
ons. Check the render method of WidgetsTab.
How can I solve this?

Answer 1

You should wrap your widgets within a td element. I have shown a demonstration using characters.
class App extends React.Component {
render() {
var chunkedPartsArray = [['A','B','C'], ['D','E','F'], ['G']]
return (
<tbody>{chunkedPartsArray.map((chunk, ind) => {
console.log(chunk);
return (<tr>
{
chunk.map((obj, ind) => {
console.log(obj);
return <td>{obj}</td>
})
}
</tr>)
})
}</tbody>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<div id="app"></div>

Answer 2

You can create a function out there and return html.
in react we need wrap the component into a div if it is more than one.
so you need a placeholder for child and return from function.
//in a file after imports
function getChunkedParts(chunk, ind){
function getChunks(obj, ind){return (<td>{obj}</td>)}
var chunks =chunk.map((obj, ind) =>getChunks(obj, ind));
return (<tr>{chunks} </tr>)
}}
//parent render
render{
var ChunkedParts = chunkedPartsArray.map((chunk, ind) =>getChunkedParts(chunk, ind);
return(<table>{ChunkedParts }</table>)
}