1

i have a parent component which renders a custom form, i am using redux form on the custom form, what i am trying to do is whenever the child component gets unmounted if there are any values on the form i need to make a prompt to the user do you want to save it or not.

So below is the code, the prompt is not happening, i am using the state and updating the state using dirty(this.props) of redux form.

so after componentWillUnmount the render is not happening. What i am missing, i think after componentWillUnmount the render won't happen.

Please see the below code. 

  **//APP.js**


import React from 'react';

class App extends Component{
  state ={
   data = []// array of data
  }

 render(){
  return(
   <div>
    <CustomForm 
     data={this.state.data}
    />
   </div>
 )
 }
}

export default App


**//CustomForm.js**

import React from 'react';
import {connect} from 'react-redux';
import CustomField from './CustomField';
import { Field, reduxForm } from 'redux-form';
import {Prompt} from 'react-router'    
 
class CustomForm extends Component{

 state ={
  formChanged: false
 }
 
 onSubmit = (values) => {
   console.log(values)
 }
 
 componentWillUnmount(){
   if(this.props.dirty){
     this.setState({
      formChanged: true
     })
   }
 }

 render(){
  return(
   <div>
   {
    this.state.formChanged?
     <Prompt 
      when={shouldBlockNavigation}
      message='You have unsaved changes, are you sure you want to leave?'
      />
      :
      null
    }
    <Form  onSubmit={handleSubmit(this.onSubmit)}>
     <Field                                                    
      name="field1"                                            
      type="text"                                              
      component={CustomField}
      label="field1"
     />
    </Form>
   </div>
 )
 }
}

export default reduxForm({
  form: "NewForm",
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: false 
})(connect(mapStateToProps, mapDispatchToProps)(CustomForm))
Learner
  • 8,379
  • 7
  • 44
  • 82
  • Because component will unmount will only be called when the component is removed from the Dom, calling set state will do nothing because you are setting state on a component that no longer exists. – ruby_newbie Dec 18 '18 at 16:40
  • Okay, so how can I get a better solution for this one – Learner Dec 18 '18 at 17:14
  • If you want to persist the state after the component is unmounted then store the dirty value in redux. Honestly it is hard to give much more input than that without actually knowing the customer facing use case. – ruby_newbie Dec 18 '18 at 17:17
  • So I need to dispatch an action from componentWillUnmount is that only the solution – Learner Dec 18 '18 at 17:20
  • I have seen a solution but I am not able to do this one when the componentWillMount https://stackoverflow.com/questions/32841757/detecting-user-leaving-page-with-react-router/37937895, is there any other way – Learner Dec 18 '18 at 17:23
  • The use case is I have multiple tabs, one of the tab is entering details and next tab is showing the list of users. So two tabs are two different components using react router, so whenever the user enter something in the registration and leaves without submitting a prompt should ask. So I need to call on the componentWillUnmount. But after that as you told even if state changed render won't happen. So this is the usecase – Learner Dec 19 '18 at 04:53

0 Answers0