title: Reactjs refresh parent after react modal popup changes data
body: <p>I am using react modal to set up a pop up in on one of my components.  I have a component that renders a div wrapped with react modal.  My parent component renders the modal component on load with the isOpen set to false.  Clicking a link on the parent sets isOpen to true and causes the modal popup to open.  </p>
  
  <p>I make changes to my data within the open popup and then save the changes and close the model when the close button is clicked.</p>
  
  <p>I am using a redux set up with actions and reducers handling the data changes and state changes. </p>
  
  <p>Conceptually, how would I update the parent to show the changes made from the popup? Shouldn't changes to my data using an action cause the store to regenerate and hence update the data in my components or do I have to explicitly "refresh" my store after saving? My issue is that right now when the popup closes it is not tirggering any kind of "refresh" on the DataView component. </p>
  
  <p>Components below:</p>
  
  <p>DataView component</p>
  
  <pre><code>import React from 'react';
  import DataView from './MonthView.js';
  import DataViewPopup from './MonthViewPopup.js';
  import { connect } from 'react-redux';
  import { getAction } from '../actions/actions.js';
  import { getActionAll } from '../actions/actions.js';
  import { getPopupData } from '../actions/actions.js';
  
  class DataViewContainer extends React.Component {
    constructor() {
      super();
  
      this.popupCategory = undefined;
      this.popupMonth = undefined;
  
      this.state = {
        detailPopup : false,
        refreshView: false
      }
  
    this.handleAddYear = this.handleAddYear.bind(this);
    this.handleSubtractYear = this.handleSubtractYear.bind(this);
    this.handleGetDetail = this.handleGetDetail.bind(this);
  
    }
  
    componentDidMount() {
     this.props.getAction(2016);
     this.props.getActionAll(2016);
    }
  
    render() {
  
       return (
          &lt;div className="row"&gt;
            &lt;div className="col-sm-8"&gt;
                &lt;MonthView transactions={this.props.storeData.storeData} selectedYear={this.props.storeData.selectedYear} onAddYear={this.handleAddYear} onSubtractYear={this.handleSubtractYear} onHandleGetDetail={this.handleGetDetail} /&gt;
            &lt;/div&gt;
            &lt;div className="col-sm-4"&gt;
                &lt;MonthViewPopup modalActive={this.state.detailPopup} transactions={this.props.storePopupData.getPopupData} selectedYear={this.props.storeTransactions.selectedYear} category={this.popupCategory} month={this.popupMonth}/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        ) 
  
    }
  
    handleGetDetail(category,month) {
  
      console.log("props inside handleGetDetail:  ", this.props);
  
      this.popupCategory = category;
      this.popupMonth = month;
      let popupYear = this.props.storeTransactions.selectedYear
  
      this.props.getPopupData(popupYear, month, category);
  
      this.setState({ detailPopup: true}, function () {});
  
    }
  
  }
  
  
  const mapStateToProps = (state) =&gt; ({
    storeData: state.storeData,
    storePopupData: state.storePopupData,
    storeDataAll: state.storeDataAll
  });
  
  export default connect(mapStateToProps, {getAction,getActionAll,getPopupData})(DataViewContainer);
  </code></pre>
  
  <p>DataViewPopup component</p>
  
  <pre><code>import React from 'react';
  import Modal from 'react-modal';
  import { connect } from 'react-redux';
  
  import { saveAction } from '../actions/actions.js';
  import { getActionAll } from '../actions/actions.js';
  
  class DataViewPopup extends React.Component {
  
    constructor (props) {
      super(props)
  
      this.editedData = new Map(); 
  
      this.state = {
        modalIsOpen: false
      };
  
      this.openModal = this.openModal.bind(this);
      this.afterOpenModal = this.afterOpenModal.bind(this);
      this.closeModal = this.closeModal.bind(this);
  
      this.renderFilteredTransactions = this.renderFilteredTransactions.bind(this);
  
    }
  
   openModal() {
      this.setState({modalIsOpen: true});
    }
  
    afterOpenModal () {
      console.log("inside afterOpenModal");
    }
  
    closeModal () {
  
      this.props.saveTransactions(this.editedData);
  
      this.editedData = new Map();
  
      this.setState({  modalIsOpen: false }, function () {});
  
    }
    componentWillUnmount() {
  
      this.props.getDataAll(); // i tried this but it does not work because the component (modal popup) is still mounted, but just not visible
  
      //this.props.refreshParent();
  
    }
  
  
     componentWillReceiveProps(nextProps){
  
      if (nextProps.modalActive === true) {
           this.openModal();
           return;
        }
  
      }
  
      render () {
          return  &lt;div&gt;
              &lt;Modal
              isOpen={this.state.modalIsOpen}
              //isOpen={this.modalActive}//not needed as is currently setup
              onAfterOpen={this.afterOpenModal}
              onRequestClose={this.closeModal}
              //style={customStyles}
              contentLabel="Example Modal"
              &gt;
  
              &lt;button onClick={this.closeModal}&gt;close&lt;/button&gt;
  
              {this.renderFilteredTransactions(this.props.data,this.props.category,this.props.month)};
              &lt;/Modal&gt;
          &lt;/div&gt;
      } 
  
      renderFilteredTransactions(trans,category,month){
          return &lt;div&gt;
              &lt;table&gt;
                  &lt;tbody className="mo-tblBody"&gt;
                      {trans &amp;&amp; trans.map((data,index) =&gt;
                          &lt;tr key={data.transid}&gt;
                              &lt;td&gt;{data.transid}&lt;/td&gt;
                              &lt;td&gt;
                                {this.renderCategory(data.category,index,data.transid)}
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      )}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
      }
  
      handleCategoryChange(value,transIndex,transId){
  
        let trans = JSON.parse(JSON.stringify(this.props.transactions));
  
        //add or updated transaction to this.editedTransactions based on whether or not the transid already exists
        trans.filter(item =&gt; item.transid === transId)
        .map(item =&gt; this.editedData.set(transId, 
                    Object.assign({}, item, { category: value })));
  
      }
  
  }
  
  const mapStateToProps = (state) =&gt; {
    return {storeDataAll: state.storeDataAll,
      storeSaveData: state.storeSaveData
    }
  };
  
  export default connect(mapStateToProps, {getDataAll,saveData})(DataViewPopup);
  </code></pre>