props is not initialized in react component

Question

I have developed a Component. In it, I am loading the data based on an Id which is passed to it like;

my Item Component code looks like

 ItemStore.CallItem("TenantId",this.props.MetaItemId);

and my calling page code looks like

<div className="box-body table-responsive no-padding list-relations" id="configureMM">
        <Item  MetaItemId={11} />
    </div>
    <div className="box-body table-responsive no-padding list-relations" id="configureMM">
        <Item  MetaItemId={12} />
    </div>

but both the times it will take the first id because this.props contains first MetaItemId but ideally it should be reinitialized when I called <Item MetaItemId={12} /> but it's not, can any one please let me know what I am missing here?

Answer 1

You need to put ItemStore.CallItem("TenantId",this.props.MetaItemId); in componentWillReceiveProps if nextProps.MetaItemId !== this.props.MetaItemId so it should look like this

this.componentWillReceiveProps = function(nextProps) { 
  if (nextProps.MetaItemId !== this.props.MetaItemId){
    ItemStore.CallItem("TenantId", nextProps.MetaItemId);
  }
}

This will do the call, but your component will not update unless you set state somewhere and that depends on what ItemStore.CallItem does.