React - Display all properties of an object
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>
})
Comments
-
dns_nx almost 2 years
I'm sure, this is a simple question, but actually I cannot find where my mistake is. 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)
As I already said, I'm sure this is simple, but actually I don't see the reason why this happens. Thanks for your help in advance!