React not rendering under loop

Question

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>

Tom Fenech · Accepted Answer · 2016-09-13T08:26:55.713

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 :)

React not rendering under loop

1 Answers1