Previous model not getting closed on opening the next one in react js

Question

import React, { Component } from 'react';
import GetStarted from '../getStarted/getStarted.modal.js';

class BuyAppForm extends Component {

  constructor(props) {
        super(props);

        this.state = {
            name: '',
            email: '',
            industry: '',
            requirement: '',
            isClicked: false,
            isActive: false
        };

        this.handleInputChange = this.handleInputChange.bind(this);

    }

    handleInputChange(event) {

        this.setState({
            [event.target.name]: event.target.value
        });

    }

    toggleModal = () => {

      console.log(this.state.isActive);
      this.setState({
        isActive:!this.state.isActive
      });

      this.setState({
            isClicked:true
        });

    }

    render() {
    
    return (
      <center>
        <div>
          <div className="animated fadeIn">
            <br />
              <div>

                <div className="col-md-6 col-md-offset-3">
                    
                    <div className="mb-1">
                      <input type="text"
                       className="form-control" 
                       placeholder="Name"
                       value={this.state.name}
                        name="name" 
                        onChange={this.handleInputChange}
                       />
                    </div>

                    <div className="mb-1">
                      <input type="text"
                       className="form-control" 
                       placeholder="Email Id"
                       value={this.state.email}
                        name="email" 
                        onChange={this.handleInputChange}
                       />
                    </div>

                    <div className="mb-1">
                      <input type="text"
                       className="form-control" 
                       placeholder="Industry"
                       value={this.state.industry}
                        name="industry" 
                        onChange={this.handleInputChange}
                       />
                    </div>

                    <div className="mb-1">
                      <textarea 
                      className="form-control" 
                      placeholder="Requirement"
                      value={this.state.requirement}
                        name="requirement" 
                        onChange={this.handleInputChange}
                      />
                    </div>

                      <div className="row float-right mx-1" >
                          <button className="btn btn-sm btn-info" onClick={this.toggleModal.bind(this)}>Save</button>
                      </div><br /><br />
                      <div className="row px-1" >
                          <h6>Contact Info</h6>
                      </div>
                      
                  </div>{
                    this.state.isClicked?
                    <GetStarted toggleModal={this.toggleModal} isActive={this.state.isActive}/>:null
                  }
                  
                </div>

            </div>
          </div>
    </center>
    )
    
  }
}


export default BuyAppForm;

import React, { Component } from 'react';
import Modal from 'react-modal';

const customStyles = {

  overlay : {
    position          : 'fixed',
    top               : 0,
    left              : 0,
    right             : 0,
    bottom            : 0,
    backgroundColor   : 'rgba(255, 255, 255, 0.75)'
  },

  content : {
    top                   : '20%',
    left                  : '24%',
    right                 : '24%',
    bottom                : 'auto',
    border                     : '1px solid #000',
    background                 : '#fff',
    overflow                   : 'auto',
    WebkitOverflowScrolling    : 'touch',
    outline                    : 'none',
    padding                    : '20px'
  }
};

class StepThree extends Component {

    render() {
    
    return (
      <div style={{ width: 30 + '%' }}>

        <Modal 
          isOpen={this.props.isActive}
          onRequestClose={this.props.toggleModal}
          contentLabel="Modal"
          style={customStyles}
        >

            <div className="card-header">
              <strong><h6>WELCOME TO YOUR DASHBOARD</h6></strong>
            </div><br/>
            
            <div className="text-center">
              <strong>
                <h4>
                  GET STARTED
                </h4>
              </strong>
            </div>

            <div className="text-center">
                
                  You are just 3 steps away from rewarding your customers.<br/><br/>
                    <span className="font-italic font-weight-bold">
                      <h3>
                          <span className="font-color">Step 1 > Step 2  > </span> Step 3
                      </h3>
                        <br/>
                    </span>

            </div>

            <div className="text-center font-weight-bold">
              <strong>
                <h5>
                  Add a Content
                </h5>
              </strong>
            </div><br/>

            <div className="px-2">
              They are essentially tiny, low power computers attached to walls. 
              Using proximity technologies they detect human presence and 
              trigger pre-programmed actions delivering contextual and personalized experiences.
              <strong>Without adding a beacon, Content can not be created.</strong><br/>
               Click NEXT to continue.
            </div><br/>
            
            <div className="panel-body">
              <button className="btn btn-sm btn-info" onClick={this.props.toggleModal}>Prev </button>
              <div className="pull-right">
                <button className="btn btn-sm btn-info" onClick={this.props.toggleModal}>End Tour </button>
              </div>
            </div>
            

        </Modal>
      </div>
    )
    
  }
}


export default StepThree;

import React, { Component } from 'react';
import Modal from 'react-modal';

import StepThree from './stepThree.modal.js';

const customStyles = {

  overlay : {
    position          : 'fixed',
    top               : 0,
    left              : 0,
    right             : 0,
    bottom            : 0,
    backgroundColor   : 'rgba(255, 255, 255, 0.75)'
  },

  content : {
    top                   : '20%',
    left                  : '24%',
    right                 : '24%',
    bottom                : 'auto',
    border                     : '1px solid #000',
    background                 : '#fff',
    overflow                   : 'auto',
    WebkitOverflowScrolling    : 'touch',
    outline                    : 'none',
    padding                    : '20px'
  }
};

class StepTwo extends Component {

  constructor(props) {
        super(props);

        this.state = {
            isClicked: false,
            isStepThreeActive: false
        };

    }

  toggleStepThree = () => {

      this.setState({
            isClicked:true
        });

      if (this.props.isActive===true) {
        
        this.props.toggleModal();
      } 



      this.setState({
            isStepThreeActive:!this.state.isStepThreeActive
        });
    }

    render() {
    
    return (
      <div style={{ width: 30 + '%' }}>

        <Modal 
          isOpen={this.props.isActive}
          onRequestClose={this.props.toggleModal}
          contentLabel="Modal"
          style={customStyles}
        >

            <div className="card-header">
              <strong><h6>WELCOME TO YOUR DASHBOARD</h6></strong>
            </div><br/>
            
            <div className="text-center">
              <strong>
                <h4>
                  GET STARTED
                </h4>
              </strong>
            </div>

            <div className="text-center">
                
                  You are just 3 steps away from rewarding your customers.<br/><br/>
                    <span className="font-italic font-weight-bold">
                      <h3>
                          <span className="font-color">Step 1 > </span> Step 2 <span className="font-color"> > Step 3</span>
                      </h3>
                        <br/>
                    </span>

            </div>

            <div className="text-center font-weight-bold">
              <strong>
                <h5>
                  Add a Beacon
                </h5>
              </strong>
            </div><br/>

            <div className="px-2">
              They are essentially tiny, low power computers attached to walls. 
              Using proximity technologies they detect human presence and 
              trigger pre-programmed actions delivering contextual and personalized experiences.
              <strong>Without adding a beacon, Content can not be created.</strong><br/>
               Click NEXT to continue.
            </div><br/>
            
            <div className="panel-body">
              <button className="btn btn-sm btn-info" onClick={this.props.toggleModal}>Prev </button>
              <button className="btn-margin btn btn-sm btn-info" onClick={this.toggleStepThree.bind(this)}>Next </button>         
              <div className="pull-right">
                <button className="btn btn-sm btn-info" onClick={this.props.toggleModal}>End Tour </button>
              </div>
            </div>

        </Modal>
        <StepThree toggleModal={this.toggleStepThree} isActive={this.state.isStepThreeActive}/>
      </div>
    )
    
  }
}


export default StepTwo;

import React, { Component } from 'react';
import Modal from 'react-modal';

import StepOne from './stepOne.modal.js';

const customStyles = {

  overlay : {
    position          : 'fixed',
    top               : 0,
    left              : 0,
    right             : 0,
    bottom            : 0,
    backgroundColor   : 'rgba(255, 255, 255, 0.75)'
  },

  content : {
    top                   : '20%',
    left                  : '24%',
    right                 : '24%',
    bottom                : 'auto',
    border                     : '1px solid #000',
    background                 : '#fff',
    overflow                   : 'auto',
    WebkitOverflowScrolling    : 'touch',
    outline                    : 'none',
    padding                    : '20px'
  }
};

class GetStarted extends Component {

  constructor(props) {
        super(props);

        this.state = {
            isClicked: false,
            isStepActive: false
        };

    }



  toggleStep = () => {

      this.setState({
            isClicked:true
        });

      if (this.props.isActive===true) {
            this.props.toggleModal();
      } 

      this.setState({
            isStepActive:!this.state.isStepActive
        });
      
    }



    render() {
    return (
      <div style={{ width: 30 + '%' }}>

        <Modal 
          isOpen={this.props.isActive}
          onRequestClose={this.props.toggleModal}
          contentLabel="Modal"
          style={customStyles}
        >

            <div className="card-header">
              <strong><h6>WELCOME TO YOUR DASHBOARD</h6></strong>
            </div><br/>
            
            <div className="text-center">
              <strong>
                <h4>
                  HELLO
                </h4>
              </strong>
            </div>

            <div className="text-center">
                
                  Welcome to Litifer<br/><br/>
                <img className="get-started-image" src="img/avatars/businessman.png" role="presentation"/>
            </div><br/>

            <div className="px-2">
              Thanks for joining us. We will give you a quick tour to get you started. Click NEXT to continue.
            </div><br/>
            
            <div className="panel-body">
              <button className="btn btn-sm btn-info" onClick={this.toggleStep.bind(this)}>Next </button>        
              <div className="pull-right">
                <button className="btn btn-sm btn-info" onClick={this.props.toggleModal}>End Tour </button>
              </div>
            </div>
              
        </Modal>

        <StepOne toggleModal={this.toggleStep} isActive={this.state.isStepActive}/>

      </div>
    )
    
  }
}


export default GetStarted;

import React, { Component } from 'react';
import Modal from 'react-modal';

import StepTwo from './stepTwo.modal.js';

const customStyles = {

  overlay : {
    position          : 'fixed',
    top               : 0,
    left              : 0,
    right             : 0,
    bottom            : 0,
    backgroundColor   : 'rgba(255, 255, 255, 0.75)'
  },

  content : {
    top                   : '20%',
    left                  : '24%',
    right                 : '24%',
    bottom                : 'auto',
    border                     : '1px solid #000',
    background                 : '#fff',
    overflow                   : 'auto',
    WebkitOverflowScrolling    : 'touch',
    outline                    : 'none',
    padding                    : '20px'
  }
};

class StepOne extends Component {

  constructor(props) {
        super(props);

        this.state = {
            isClicked: false,
            isStepTwoActive: false
        };

    }

  toggleStepTwo = () => {

      this.setState({
            isClicked:true
        });

      if (this.props.isActive===true) {
            this.props.toggleModal();
      } 

      this.setState({
            isStepTwoActive:!this.state.isStepTwoActive
        });
    }

    render() {
    
    return (
      <div style={{ width: 30 + '%' }}>

        <Modal 
          isOpen={this.props.isActive}
          onRequestClose={this.props.toggleModal}
          onAfterOpen={() => {}}
          contentLabel="Modal"
          style={customStyles}
        >

            <div className="card-header">
              <strong><h6>WELCOME TO YOUR DASHBOARD</h6></strong>
            </div><br/>
            
            <div className="text-center">
              <strong>
                <h4>
                  GET STARTED
                </h4>
              </strong>
            </div>

            <div className="text-center">
                
                  You are just 3 steps away from rewarding your customers.<br/><br/>
                    <span className="font-italic font-weight-bold">
                      <h3>
                          Step 1 <span className="font-color"> > Step 2 > Step 3</span>
                      </h3>
                        <br/>
                    </span>

            </div>

            <div className="text-center font-weight-bold">
              <strong>
                <h5>
                  Add a Store
                </h5>
              </strong>
            </div><br/>

            <div className="px-2">
              Stores are physical places. 
              Stores need to have detection tags that specify activity areas with existing beacon installations.
              <strong>Without adding stores, beacons can not be added and thus furthur services can't be availed.</strong><br/>
               Click NEXT to continue.
            </div><br/>
            
            <div className="panel-body">
              <button className="btn btn-sm btn-info" onClick={this.props.toggleModal}>Prev </button>
              <button className="btn-margin btn btn-sm btn-info" onClick={this.toggleStepTwo.bind(this)}>Next </button>         
              <div className="pull-right">
                <button className="btn btn-sm btn-info" onClick={this.props.toggleModal}>End Tour </button>
              </div>
            </div>

        </Modal>
        <StepTwo toggleModal={this.toggleStepTwo} isActive={this.state.isStepTwoActive}/>
      </div>
    )
    
  }
}


export default StepOne;

This is the snippet i provided. What I'm doing is on clicking a button i had opened a model "GetStarted". In this there is a "next" button, stepOne named model is opened whose snippet i had provided. What i want is now on clicking the "end tour " button i want to close all the modals How to do that?

score 0 · Accepted Answer · answered May 01 '17 at 09:51

0

Its pretty easy, the solution is to make sure that when you are opening the next modal, you are closing the current one

import React, { Component } from 'react';
import Modal from 'react-modal';

import StepTwo from './stepTwo.modal.js';

const customStyles = {

  overlay : {
    position          : 'fixed',
    top               : 0,
    left              : 0,
    right             : 0,
    bottom            : 0,
    backgroundColor   : 'rgba(255, 255, 255, 0.75)'
  },

  content : {
    top                   : '20%',
    left                  : '24%',
    right                 : '24%',
    bottom                : 'auto',
    border                     : '1px solid #000',
    background                 : '#fff',
    overflow                   : 'auto',
    WebkitOverflowScrolling    : 'touch',
    outline                    : 'none',
    padding                    : '20px'
  }
};

class StepOne extends Component {

  constructor(props) {
        super(props);

        this.state = {
            isClicked: false,
            isStepTwoActive: false
        };

    }

  toggleStepTwo = () => {

      this.setState({
            isClicked:true
        });

      this.setState({
            isStepTwoActive:!this.state.isStepTwoActive
        });
      this.props.closeStepOneModal();
    }

    closeStepTwoModal = () =>{
          this.setState({
            isStepTwoActive:false
        });
    }
    render() {

    return (
      <div style={{ width: 30 + '%' }}>

        <Modal 
          isOpen={this.props.isActive}
          onRequestClose={this.props.toggleModal}
          contentLabel="Modal"
          style={customStyles}
        >

            <div className="card-header">
              <strong><h6>WELCOME TO YOUR DASHBOARD</h6></strong>
            </div><br/>

            <div className="text-center">
              <strong>
                <h4>
                  GET STARTED
                </h4>
              </strong>
            </div>

            <div className="text-center">

                  You are just 3 steps away from rewarding your customers.<br/><br/>
                    <span className="font-italic font-weight-bold">
                      <h3>
                          Step 1 <span className="font-color"> > Step 2 > Step 3</span>
                      </h3>
                        <br/>
                    </span>

            </div>

            <div className="text-center font-weight-bold">
              <strong>
                <h5>
                  Add a Store
                </h5>
              </strong>
            </div><br/>

            <div className="px-2">
              Stores are physical places. 
              Stores need to have detection tags that specify activity areas with existing beacon installations.
              Without adding stores, beacons can not be added and thus furthur services can't be availed.<br/>
               Click NEXT to continue.
            </div><br/>

            <div className="panel-body">
              <button className="btn btn-sm btn-info" onClick={this.props.toggleModal}>Prev </button>
              <button className="btn-margin btn btn-sm btn-info" onClick={this.toggleStepTwo.bind(this)}>Next </button>         
              <div className="pull-right">
                <button className="btn btn-sm btn-info" onClick={this.props.toggleModal}>End Tour </button>
              </div>
            </div>

        </Modal>
        <StepTwo toggleModal={this.toggleStepTwo} isActive={this.state.isStepTwoActive} closeStepTwoModal={this.closeStepTwoModal}/>
      </div>
    )

  }
}


export default StepOne;

answered May 01 '17 at 09:51

Shubham Khatri

270,417
55
406
400

i tried that already bro, not your solution actually Now I'm able to quit but previous functionality not working – Piyush May 01 '17 at 11:17
Well you may need to restructure you code, and the solution should look like this – Shubham Khatri May 01 '17 at 11:19
using this now i had added next and exit functionality but previous button now working – Piyush May 01 '17 at 11:44
previous button behaving like exit in all screens – Piyush May 01 '17 at 11:44
Any solution to that? – Piyush May 03 '17 at 08:51
No Piyush, I am not able to understand, the complete procedure – Shubham Khatri May 03 '17 at 08:52
just see the full snippet i provided – Piyush May 03 '17 at 08:53
Functionaliy will be BuyApp > get started > step 1> step 2> step 3 – Piyush May 03 '17 at 08:54
Ok, I will see, give me some time – Shubham Khatri May 03 '17 at 08:58
Any solution...? – Piyush May 03 '17 at 12:16
1

@Piyush, I went through your code, and as I understand the answer that I provided above should be sufficient. Since you want to open the next modal on click of next button, the idea is to close the current one before opening the new one, in order to do so, you can have a function in the parent component and call the parent function which toggles the state and this will toggle the props being received to the current component and close the modal. – Shubham Khatri May 03 '17 at 17:51
also i want to open previous model on previous button and on end tour all modals to be closed – Piyush May 04 '17 at 04:48
i already did that next and quit functionality but did not understand the previous button functionality – Piyush May 04 '17 at 04:50
1

Ok so, on end tour button, you only need to close the current modal as all other are already closed, also on previous button functionality, you need to follow a similar approach to next button but here instead of closing the prev one, you need to close the current one and open the previous, for this you have to communicate to the grandparent of the current component, so idea is to call a function in parent which in turn calls the function in grandparent to set the state, along with that you need to close the current one – Shubham Khatri May 04 '17 at 04:54
You just provided a lot of theory... any snippet if you have? – Piyush May 04 '17 at 08:29
1

Refer this answer, I am sure it will help and you will be able to achieve what you want, because the idea is pretty simple, just go step by step http://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs/38397755#38397755 – Shubham Khatri May 04 '17 at 08:36
yes it was simple but that was a different thing i think – Piyush May 05 '17 at 08:03
So finally you were able to solve your problem, thats nice. – Shubham Khatri May 05 '17 at 08:06
http://stackoverflow.com/questions/43816729/how-to-show-only-values-of-multi-selected-items-using-react-select – Piyush May 06 '17 at 04:35

Previous model not getting closed on opening the next one in react js

1 Answers1