React-Redux: Only One Prop Undefined in ComponentDidMount()

Question

I have this code in my container file:

const mapStateToProps = (state) => ({
   homes: Object.values(state.entities.homes),
   center: { lat: 37.7758, lng: -122.435 },
});

and this in my component file:

 <div>
   <div className="left-half" >
     <Map
       homes={homes}
       center={center}
     />
   </div>
   <div className="right-half">
     <HomeIndex 
       homes={homes} 
     />
   </div>
</div>

I am passing the same homes prop for both the Map and the HomeIndex containers but when I try to access it via this.props.homes in my Map container, it comes out as undefined.

What's strange is that this.props.center is defined while homes is not.

It's important to note that in the Map container, I am accessing my props in a ComponentDidMount() method.

I've searched around and I understand that ComponentDidMount will not grab the updated props but shouldn't the props be updated by the time it gets to my Map component since I'm grabbing it from my state in the container file?

Answer 1

You are passing home props as own property .But in container,you are overwriting it with state props .

const mapStateToProps = (state, ownProps) => ({
   homes: Object.values(state.entities.homes), //state props get passed and not actual own props.
   center: { lat: 37.7758, lng: -122.435 },
});

In order to get passed own props,use ownProps .

const mapStateToProps = (state, ownProps) => ({
   homes: Object.values(ownProps.homes),//access home via ownProps
   center: { lat: 37.7758, lng: -122.435 },
});

Answer 2

If you want that map container's componentDidMount to have props value use it like this. By this, Map and HomeIndex will only render when home is not defined.

  <div>
     <div className="left-half" >
     {homes && 
       <Map
           homes={homes}
           center={center}
         />
     }
     </div>
     <div className="right-half">
      { homes && 
        <HomeIndex 
           homes={homes} 
        />
      }
     </div>
  </div>

To check the value of homes that reducer is returning, change your mapStateToProps

const mapStateToProps = (state) =>{ 
   console.log(state.entities.homes);
   return { 
      homes: Object.values(state.entities.homes),
      center: { lat: 37.7758, lng: -122.435 },
   }
}; 

Answer 3

The reason why it was coming up as empty was because the ComponentDidMount() in the child component ran before the ComponentDidMount() in the parent container. Therefore, when I was trying to pass this.props.homes from the parent to the child, it was undefined.

To solve this, I put if(!this.props.homes) return null at the top of my render function of my parent container so that I could wait for the ComponentDidMount() in my parent to run before rendering the children.