React - Display all properties of an object

Question

I have a component where an object has not a fixed number of properties. Actually I'm having trouble to display all properties of the object.

import React, { Component } from 'react';

class FreightRelayWithPricesAndAreas extends Component {
    
    constructor(props) {
        super(props);
        this.state = {
          freightRelayPrice: props.freightRelayPrice
        };
    }

    render() {
      const Fragment = React.Fragment;
      return (
        <Fragment>
          <tr>
            {
              Object.keys(this.state.freightRelayPrice).map(function(key) {
                  return <td className="whiteSpaceNoWrap">{ this.state.freightRelayPrice[key] }</td>
              })
            }
          </tr>
        </Fragment>
      )
    }
}

export default FreightRelayWithPricesAndAreas

The error is always:

app.js:57763 Uncaught TypeError: Cannot read property 'state' of undefined

at app.js:57763

at Array.map ()

at FreightRelayWithPricesAndAreas.render (app.js:57759)

at finishClassComponent (app.js:48488)

at updateClassComponent (app.js:48465)

at beginWork (app.js:48840)

at performUnitOfWork (app.js:50839)

at workLoop (app.js:50903)

at HTMLUnknownElement.callCallback (app.js:41157)

at Object.invokeGuardedCallbackDev (app.js:41196)

I'm sure this is simple, but actually I don't see the reason why this happens. What can I try next?

Answer 1

Object.keys(this.state.freightRelayPrice).map(function(key) {
   return <td className="whiteSpaceNoWrap">{ this.state.freightRelayPrice[key] }</td>
})

Inside callback function this is a function context itself. You can use arrow function

Object.keys(this.state.freightRelayPrice).map((key) => {
   return <td className="whiteSpaceNoWrap">{ this.state.freightRelayPrice[key] }</td>
})