shank shank - 2 months ago 6
React JSX Question

React not rendering <th> under loop

name and Product under th tag gets rendered but the loop for doesn't get rendered..but i can see the values in console.nad doesn't throw any error...please hemp

<tr>
<th>name</th>
<th>productID</th>
{this.state.product[0].customCoulmns.forEach(function (columnhead) {
console.log("columnhead lolzz ",columnhead.columnName);
return <th key={columnhead.columnName}>{columnhead.columnName}</th>
}.bind(this))
}
</tr>

Answer

forEach doesn't return anything to the caller. You should be using a map instead:

this.state.product[0].customCoulmns.map(function (columnHead) {
    return <th key={columnHead.columnName}>{columnHead.columnName}</th>
})

Note that there's no need to bind this here. It is only necessary to do this when you need a reference to this and the original value will no longer be in scope when the function is called. In this case, neither of those conditions are true.

Also, as a general piece of advice, take care with your spelling and casing consistency in your code :)