title: How do I reset modal props on close
body: <p>I have a component, DeleteRoute, which is just a wrapper around a Modal. It allows me to delete a "Route" entity.</p>
  
  <p>I am using React as well as Redux to maintain data and state.</p>
  
  <p>I am struggling with the correct architecture to make the modal work.  I didn't like having all of the state in the parent container because it made the parent cluttered.  So I put the redux actions inside the modal. This way I pass in a route from the parent, but call "deleteRoute" from the redux store inside the DeleteRoute component, and I can display success and error messages.</p>
  
  <p>This all works great, except it I close and re-open the modal, the previous success/error message is still displayed.  This is because the closing/opening is done with a toggle from the parent, but the parent can't reset the child props.</p>
  
  <p>I thought I could just pass the success and error properties in the parent, and anytime the parent re-renders it would reset those, but it isn't (despite it re-rendering when isOpen changes).</p>
  
  <pre><code>class DeleteRoute extends React.Component {
    constructor(props) {
      super(props);
  
      this.deleteRoute = this.deleteRoute.bind(this);
    }
  
    deleteRoute() {
      this.props.deleteRoute(this.props.route);
    }
  
    render() {
      var route = this.props.route || {};
  
      return (
        &lt;div&gt;
          &lt;Modal
            isOpen={this.props.isOpen}
            toggle={this.props.toggle}
          &gt;
            &lt;ModalHeader toggle={this.props.toggle}&gt;Delete Route&lt;/ModalHeader&gt;
  
            &lt;ModalBody&gt;
              {this.props.isLoading &amp;&amp; &lt;Spinner color="primary" /&gt;}
  
              &lt;Alert color="danger" isOpen={this.props.error}&gt;{this.props.error}&lt;/Alert&gt;
              &lt;Alert color="success" isOpen={this.props.success}&gt;Deleted successfully&lt;/Alert&gt;
  
              &lt;Form&gt;
                &lt;Row form&gt;
                  &lt;Col&gt;
                    &lt;FormGroup&gt;
                      &lt;Label for="CssPlatform"&gt;Css Platform&lt;/Label&gt;
                      &lt;Input disabled name="CssPlatform" type="text" value={route.CSSPlatform} /&gt;
                    &lt;/FormGroup&gt;
                  &lt;/Col&gt;
  
                  &lt;Col&gt;
                    &lt;FormGroup&gt;
                      &lt;Label for="ProdManager"&gt;Prod Manager&lt;/Label&gt;
                      &lt;Input disabled name="ProdManager" type="text" value={route.ProdManager} /&gt;
                    &lt;/FormGroup&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
  
                &lt;Row form&gt;
                  &lt;Col&gt;
                    &lt;FormGroup&gt;
                      &lt;Label for="CssProduct"&gt;Css Product&lt;/Label&gt;
                      &lt;Input disabled name="CssProduct" type="text" value={route.CSSProduct} /&gt;
                    &lt;/FormGroup&gt;
                  &lt;/Col&gt;
  
                  &lt;Col&gt;
                    &lt;FormGroup&gt;
                      &lt;Label for="ProgSupervisor"&gt;Prog Supervisor&lt;/Label&gt;
                      &lt;Input disabled name="ProgSupervisor" type="text" value={route.ProgSupervisor} /&gt;
                    &lt;/FormGroup&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
  
                &lt;Row form&gt;
                  &lt;Col&gt;
                    &lt;FormGroup&gt;
                      &lt;Label for="CssSubProduct"&gt;Css SubProduct&lt;/Label&gt;
                      &lt;Input disabled name="CssSubProduct" type="text" value={route.CSSSubProduct} /&gt;
                    &lt;/FormGroup&gt;
                  &lt;/Col&gt;
  
                  &lt;Col&gt;
                    &lt;FormGroup&gt;
                      &lt;Label for="RallyProject"&gt;Rally Project&lt;/Label&gt;
                      &lt;Input disabled name="RallyProject" type="text" value={route.RallyProject} /&gt;
                    &lt;/FormGroup&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
  
                &lt;Row form&gt;
                  &lt;Col&gt;
                    &lt;FormGroup check inline&gt;
                      &lt;Label check&gt;
                        &lt;Input disabled name="CssProductActive" type="checkbox" checked={route.CSSProductActive} /&gt;
                        Css Product Active
                      &lt;/Label&gt;
                    &lt;/FormGroup&gt;
                  &lt;/Col&gt;
  
                  &lt;Col&gt;
                    &lt;FormGroup check inline&gt;
                      &lt;Label check&gt;
                        &lt;Input disabled name="CssSubProductActive" type="checkbox" checked={route.CSSSubProductActive} /&gt;
                        Css SubProduct Active
                      &lt;/Label&gt;
                    &lt;/FormGroup&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
              &lt;/Form&gt;
            &lt;/ModalBody&gt;
  
            &lt;ModalFooter&gt;
              &lt;Button color="primary" onClick={this.deleteRoute}&gt;Delete Route&lt;/Button&gt;{' '}
              &lt;Button color="secondary" onClick={this.props.toggle}&gt;Cancel&lt;/Button&gt;
            &lt;/ModalFooter&gt;
          &lt;/Modal&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default connect(
    state =&gt; state.deleteRouteReducer,
    dispatch =&gt; bindActionCreators(actionCreators, dispatch))(DeleteRoute);
  
  
  render() {
      return (
        &lt;div&gt;
          &lt;h2&gt;Routes&lt;/h2&gt;
          &lt;p&gt;Routes define how items from CSS get imported into Rally. Use routes to connect a Rally project to a set of criteria in CSS.&lt;/p&gt;
          &lt;div&gt;
            &lt;AddRoute isOpen={this.props.showAddRoute} toggle={this.toggleAddRoute} /&gt;
            &lt;DeleteRoute error={this.props.deleteRouteError} success={this.props.deleteRouteSuccess} isOpen={this.props.showDeleteRoute} route={this.props.selectedRoute} toggle={this.toggleDeleteRoute} /&gt;
  
            &lt;DataTable
              actions={[
                { Click: this.toggleAddRoute, Color: 'green', Icon: 'MdAdd', ToolTip: "Add new route" },
                { Click: this.toggleEditRoute, Color: 'orange', Icon: 'MdEdit', ToolTip: "Edit route", RowAction: true },
                { Click: this.toggleDeleteRoute, Color: 'red', Icon: 'MdRemove', ToolTip: "Delete route", RowAction: true },
              ]}
              columns={[
                { Title: "Platform", Field: "CSSPlatform" },
                { Title: "Product", Field: "CSSProduct" },
                { Title: "SubProduct", Field: "CSSSubProduct" },
                { Title: "ProdManager", Field: "ProdManager" },
                { Title: "ProgSupervisor", Field: "ProgSupervisor" },
                { Title: "Product Active?", Field: "CSSProductActive" },
                { Title: "SubProduct Active?", Field: "CSSSubProductActive" },
                { Title: "Rally Project", Field: "RallyProject" },
                { Title: "Rally Url", Field: "RallyUrl" }
              ]}
              data={this.props.routes}
              edit={this.editRoute}
              isLoading={this.props.isLoading} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
  </code></pre>