Cannot convert undefined or null to object in react

Question

I am trying to map object properties from initial state object. I can get all properties except the nested milesotnes .

The initial state is defined in components class constructor like so:

 class GoalView extends Component { constructor(props) { super(props); this.state = { dataGoal: {}, uid: firebaseAuth().currentUser.uid, currentGoalId: this.props.match.params.goalId, }; } componentDidMount = () => { const dataGoalRef = dbRef.child('goals/'+this.state.uid+'/'+this.state.currentGoalId); dataGoalRef.on('value', snap => { this.setState({ dataGoal: snap.val(), currentGoalId: this.props.match.params.goalId, }); }); } componentWillUnmount = () => { this.state = { currentGoalId: null, }; } ... } 

I am getting the currentGoalId from a React Router V4 Link:

<Link title="Open goal" to={"/app/goal/id"+key}>Open goal</Link>

which is in a higher order component. The render method of the current GoalView component looks like so:

  render() { return( <div> <main className="content"> <p>{this.state.dataGoal.description}</p><br /><br /> {Object.keys(this.state.dataGoal.milestones).map( (milestoneKey) => { const milestonesData = this.state.dataGoal.milestones[milestoneKey]; return <div className="milestone-wrap" key={milestoneKey}> <label className="milestone-label truncate">{milestonesData.name}</label> </div> })} </main> </div> ); } } 

and the state:

I am getting Cannot convert undefined or null to object from this row {Object.keys(this.state.dataGoal.milestones).map( (milestoneKey) => {...}

but the description in render method right above that row is rendering just fine. Anyone has some ideas, please?

Thank you, Jakub

Answer 1

Before using Object.keys() put the check on dataGoal , like this:

this.state.dataGoal.milestones && Object.keys(this.state.dataGoal.milestones)

Reason: You are fetching the data from server it will take time, until that this.state.dataGoal.milestones will be undefined .

Or you can hold the rendering until you didn't get the data by using a bool in state variable.

Check this, it will produce the same error:

 let a = {}; Object.keys(aa).map(el => console.log(el)); 

Suggestion: Binding of lifecycle methods are not required, use them directly, so remove the arrow function with lifecycle methods .