shank shank - 1 year ago 61
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

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

Answer Source

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

this.state.product[0] (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 :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download