React dynamic table TH header not displaying

Question

I have a react component that renders a table. I works fine except that I changed my header to be rendered dynamically instead of hard coding the headers. Now the dynamic header rows are not displaying, even though I can see in console.log that my data is present. I've done this kind of thing a thousand times. Am I overlooking something?

<table>
        <thead>
          <tr>
            <th colSpan='10'><label>Weekly Summary:  {this.props.selectedYear}</label></th>
          </tr>
          <tr>
            <th>Category</th>

            {/* <th>Header 5</th>
            <th>Header 6</th>
            <th>Header 7</th>
            <th>Header 8</th>
            <th>Header 9</th> */}

            {console.log(this.props.transactions)}
            {
              this.props.transactions.map(function(el,i) {
                console.log(el.category)
                if (el.category == "Total"){
                  Object.keys(el.periods).map(function(key,index) {
                    console.log("week value: ", key)
                    return <th key={key}>{key}</th>
                  })
                }  
              })
            }
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
</table>

Here's what the data looks like:

{
"category": "Total",
  "periods": {
    "5": 19654.59,
    "6": 562.2199999999999,
    "7": 534.37,
    "8": 626.67,
    "9": 334.54
  }
}

Answer 1

Your map function on this.props.transactions is returning undefined right now, that's why those th are not being rendered. You need to change from

Object.keys(el.periods).map(function(key,index) {

to

return Object.keys(el.periods).map(function(key,index) {

This way you return whatever the result of calling map on Object.keys was.