CODEWITHSUNDEEP
reactjs
foufrix
foufrix

Reputation: 1456

How can i Unmount a component in react

I have a parent component with different render depending on the step we are :

render(){

  ..some code to determine step ..

  return(
    {step == 1 && <Step1/>}
    {step == 2 && <Step2/>}
    {step == 3 && <Step3/>}
  )    
}

...

I can go through the step and sometime go back. When i go back from step 3 to 2, the component step 3 is not unmounted. I want it to be because i have some function that run on init that depends on configuration in step 2, so if a user change configuration in step 2 actually it does not change what i see in step 3 (and it should).

I have no idea how to unmount my component, if anyone know how I'll be glad to know ! Thanks in advance

Upvotes: 1

Views: 969

Answers (1)

Ihor Lavs
Ihor Lavs

Reputation: 2463

You should create the state in your parent Component called 'step' and outsource your logic to determine step in a standalone method

constructor(props){
   super(props);
   this.state = {
       step: 1
   }
}

stepsHandle() {
    ..some code to determine step ..
}

render(){
  const step = this.state.step;
  return(
    {step == 1 && <Step1/>}
    {step == 2 && <Step2/>}
    {step == 3 && <Step3/>}
  )    
}

Upvotes: 1

Related Questions