props value come as undefined but print on browser console - reactjs

Question

I have this strange issue, not sure what I am doing wrong. I pass a flags object to this components and it is available when I log it on console but it doesn't enter the loop observe logging Object.keys(flags) is undefined. Even when trying to access the value of an object directly, it is undefined.
class Home extends React.Component {
render() {
const allflags = [];
console.log('in Home component flags.. ', this.props.flags);
const {flags} = this.props;
console.log('Object.keys ', Object.keys(flags));
Object.keys(flags).forEach(key => {
console.log('key => ', key);
console.log('value => ', ''+ flags[key]);
allflags.push(<div>{key} : {''+ flags[key]}</div>);
});
console.log('Home Props flags', flags);
console.log('displayWallet >>>>>>>>> ', ''+flags['displayWallet']);
return (
<div>
<h1> All flags</h1>
{allflags}
</div>
);
}
}
Actual Result:
App.js:8 in Home component flags.. {}displayLogonStatus:true displayWallet: true __proto__: Object
App.js:10 Object.keys []length: 0__proto__: Array(0)
App.js:16 Home Props flags {}displayLogonStatus: false displayWallet: true __proto__: Object
App.js:17 displayWallet >>>>>>>>> undefined
Expected Result:
App.js:10 Object.keys []length: 0__proto__: Array(0) - Shouldn't be empty
App.js:17 displayWallet >>>>>>>>> undefined - Should be undefined when it is printed just above.

Answer 1

I think the problem you are having is how you are passing the props to the component.
I can suggest you to debug
console.log(this.props);
and check what is going on inside.
Also, I paste a working example of your code.
class Home extends React.Component {
render() {
const { flags } = this.props;
const allflags = [];
Object.keys(flags).forEach(key => {
allflags.push(<div>{key} : {''+ flags[key]}</div>);
});
return (
<div>
<h1>All flags</h1>
{allflags}
</div>
);
}
}
class App extends Component {
render() {
return (
<Home flags={{ displayLogonStatus: true, displayWallet: true }} />
);
}
}
I hope this helps you