title: ComponentDidUpdate is not working while updating
body: <p>I have a configured list with location details. After initial retrieving the details,if i delete any location item or items and update it. It is not taking updated value. I think componentdidupdate is not working properly. How to resolve it</p>
  
  <p>Component code:</p>
  
  <pre><code>export class NewLocationPanel extends React.Component{
      constructor(props){
          super(props);
          this.state={
                 open:false,
                 configuredList:[],
                 clearList:[]
          };
         this.configLocation = this.configLocation.bind(this);
          this.togglePanel = this.togglePanel.bind(this);
          this.handleClick = this.handleClick.bind(this);
          this.allLocations = this.allLocations.bind(this);
          this.clearall = this.clearall.bind(this);
          this.getLocationData = this.getLocationData.bind(this);
          this.handleRemove = this.handleRemove.bind(this);
          this.removeConfigLocation = this.removeConfigLocation.bind(this);
          //this.removeLocationAll = this.removeLocationAll.bind(this);
      }
  
      togglePanel (e){
          this.setState({open : !this.state.open});
      }
      handleRemove(mruCode){
          this.props.removeLocation(mruCode)
       }
      handleClick (mruCode){
        this.props.addLocation(mruCode)
       }
       allLocations (){
         this.props.addAllLocation()
      }
      clearall (){
          this.props.removeAllLocation()
      }
  
      componentDidMount() {
          this.props.loadData();
          if(this.props.locationData !=null &amp;&amp; this.props.locationData!= undefined){
              this.configLocation(this.props.locationData);
          }
        }
  
      componentDidUpdate(prevProps,prevState){
          console.log(prevProps);
          if (prevProps.locationData != this.props.locationData) {
              this.configLocation(this.props.locationData);
              console.log(this.props.locationData);
          }
  
      }
  
      configLocation(locationData){
          let configuredList =[];
          if(locationData.locations.locationDetails != null &amp;&amp; locationData.locations.locationDetails !=undefined ){
              configuredList = locationData.locations.locationDetails;
          }
          else if(locationData.locations.locationDetails === null){
              configuredList = [];
          }
          this.setState({configuredList});
      }
  
      removeConfigLocation(index){
          this.setState(({configuredList})=&gt;{
              let remList = [...configuredList]
              remList.splice(index,1)
              return {
                  configuredList:remList
              }
          })
      }
  
  
      getLocationData(){
           let saveableLocationlist = [];
           if(this.props.locationData === null){
               saveableLocationlist = [];
           }
          const locationData = {
              locationDetails : saveableLocationlist
          }
        return locationData;
      }
  
      render(){
          //const{configuredList} = this.state;
          const _labels = store.getLabels();
          let collapsedToggle = this.props.open ? 'collapsed' : ''
          return(
              &lt;div className="panel panel-default"&gt;
              &lt;div className="panel-heading" onClick={(e)=&gt;this.togglePanel(e)}&gt;
                &lt;div className="row"&gt;
                &lt;div className="col-xs-12 col-sm-8 col-md-6 col-lg-6 panelHeadingLabel"&gt;
                       &lt;span&gt;{this.props.title}&lt;/span&gt;
                       &lt;/div&gt;
                          &lt;div className="pull-right"&gt;
                          &lt;span className="defaultHeaderTextColor"&gt;{this.state.configuredList.map((loc,index)=&gt;&lt;span key={index}&gt;{loc.mruCode} - {_labels[loc.division]} - {loc.country}&lt;/span&gt;)}
                             &lt;span onClick={(e)=&gt;this.togglePanel(e)} className={this.state.open ? "collapse-chevronn" : "collapse-chevron"} aria-hidden="true"&gt;&lt;/span&gt;
                     &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
             &lt;/div&gt;
                {this.state.open?(
                          &lt;div className="panel-body"&gt;
                               &lt;div className="row grid-divider"&gt;
                               &lt;div className="col-sm-6"&gt;
                               &lt;div className="col-padding"&gt;&lt;div className="pos-div"&gt;&lt;h3&gt;Locations List&lt;/h3&gt;&lt;button style={{ display: this.props.location.length === this.props.conLocations.length ? "none" : "block" }} className="allLargeBtn" onClick={()=&gt;{this.allLocations()}}&gt;Add all locations&lt;/button&gt;&lt;/div&gt;&lt;hr/&gt;
                               {this.props.location.map((item,index)=&gt;(
                               &lt;div key={index}&gt;&lt;div&gt;&lt;b&gt;{item.mruCode} - {_labels[item.division]} - {item.country}&lt;/b&gt;{!this.props.conLocations.find(item2 =&gt; item.mruCode === item2.mruCode)&amp;&amp;(&lt;div className="pull-right jd"&gt;&lt;button style={{ display: this.state.configuredList.find(item3=&gt; item.mruCode===item3.mruCode) ? "none" : "block" }} className="call-to-action" onClick={()=&gt;{this.handleClick(item.mruCode)}}&gt;Add Location&lt;/button&gt;&lt;/div&gt;)}&lt;hr/&gt;&lt;/div&gt;&lt;/div&gt;))}
                              &lt;/div&gt;
                               &lt;/div&gt; 
                                    &lt;div className="col-sm-6"&gt;
                                    &lt;div className="col-padding"&gt;
                                    &lt;div className="pos-div"&gt;&lt;h3&gt;Configured Location&lt;/h3&gt;&lt;button className="allLargeBtn" onClick={()=&gt;this.clearall()}&gt;Remove all location&lt;/button&gt;&lt;/div&gt;&lt;hr/&gt;
                &lt;div&gt;&lt;table className="table"&gt;&lt;thead&gt;{this.state.configuredList.map((locc,index)=&gt;&lt;tr key={index}&gt;&lt;th&gt;&lt;b&gt;{locc.mruCode} - {_labels[locc.division]} - {locc.country}&lt;/b&gt;&lt;/th&gt;&lt;th className="text-right"&gt;&lt;img alt="DeleteIcon" onClick={()=&gt;{this.removeConfigLocation(index)}} className="deleteIconStyle" src="img/delete_large_active.png" /&gt;&lt;/th&gt;&lt;/tr&gt;)}&lt;/thead&gt;&lt;tbody&gt;
                          {this.props.conLocations.map((loct,index)=&gt;&lt;tr key={index}&gt;
                             &lt;td&gt;&lt;b&gt;{loct.mruCode} - {_labels[loct.division]} - {loct.country}&lt;/b&gt;&lt;/td&gt;
                             &lt;td className="text-right"&gt;&lt;img alt="DeleteIcon" onClick={()=&gt;this.handleRemove(loct.mruCode)}className="deleteIconStyle" src="img/delete_large_active.png" /&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          )}
                      &lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;
  
                                     &lt;/div&gt;
                                    &lt;/div&gt;
                                    &lt;/div&gt; 
                      &lt;/div&gt;):null}
              &lt;/div&gt;
  
          );
      }
  }
  
  const mapStateToProps = state =&gt;{
      return{
          location:state.locationRed.location,
          conLocations:state.locationRed.conLocations
      };
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return{
          loadData:()=&gt;{dispatch(loadData())},
          addLocation:(mruCode)=&gt;{dispatch(addLocation(mruCode))},
          addAllLocation:() =&gt;{dispatch(addAllLocation())},
          removeLocation: (mruCode)=&gt;{dispatch(removeLocation(mruCode))},
          removeAllLocation: () =&gt;{dispatch(removeAllLocation())}
      }
  }
  
  
  export default connect(mapStateToProps,mapDispatchToProps,null,{withRef:true})(NewLocationPanel);
  </code></pre>
  
  <p>While checking console.log(this.props.locationData) in componentDidUpdate method, initially it is giving the list items. After delete any item if i save the changes then it is giving same list items with deleted item too. how to make it work?</p>