6

I want to open a Modal, say 'modal for user login', from different components in my React app. For ex: I want the modal to open from A.js, B.js and C.js. So I made a new component ModalWindow.js which contains the modal and I imported it in A.js, B.js and C.js.

Now the issue is that I got to maintain state showModal: false in all 3 components for Modal to show/hide. Is there anyway that I have to maintain a single state.

One way is that I maintain state in the parent component. But is there any better way possible?

X.js

import A from 'A.js'
import B from 'B.js'
import C from 'C.js'

class X extends Component {
  return(
    render{
      <div>
        <A />
        <B />
        <C />
      </div>
    }
  )
}

export default X

A.js

import ModalWindow from 'ModalWindow.js'

class A extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  return(
    render{
      <ModalWindow show={this.state.showModal} container={this}/>
    }
  )
}

export default A

B.js

import ModalWindow from 'ModalWindow.js'

class B extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  return(
    render{
      <ModalWindow show={this.state.showModal} container={this}/>
    }
  )
}

export default B

C.js

import ModalWindow from 'ModalWindow.js'

class C extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }
  return(
    render{
      <ModalWindow show={this.state.showModal} container={this}/>
    }
  )
}

export default C

ModalWindow.js

import Modal from 'Bootstrap/Modal'

class ModalWindow extends Component {
  return(
    render{
      <Modal
      show={this.props.showModal}
      container={this.props.container}
      bsSize='small'
    >
      <Modal.Header closeButton="true">
        <Modal.Title id="contained-modal-title">
          Login
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        Login Here
      </Modal.Body>
    </Modal>
    }
  )
}

export default ModalWindow
iamsaksham
  • 2,879
  • 4
  • 26
  • 50
  • If you are using Redux you can hold the state in a Redux store and then dispatch actions in the child components to show it - but I wouldn't recommend implementing Redux just for this purpose. – erik-sn Sep 28 '16 at 13:06
  • I use redux already. – iamsaksham Sep 28 '16 at 13:13
  • Well a common approach I take is to keep a "display" reducer which handles various states of display. Then I have an action which takes in a message that shows the modal with the message. Then in the modal itself I might have a button that, onClick, fires an action that hides the modal. – erik-sn Sep 28 '16 at 13:16

2 Answers2

7

You can have the state inside the modal and expose two functions to open/close modal which will change the state. Those functions can be accessed via refs in other components.See the example below.

ModalWindow.js

import Modal from 'Bootstrap/Modal'

class ModalWindow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    }
  }
  show() {
    this.setState({
      showModal: true,
    })
  }
  hide() {
    this.setState({
      showModal: true,
    })
  }
  render() {
    return <Modal
    show={this.state.showModal}
    container={this.props.container}
    bsSize='small'>
      < Modal.Header closeButton = "true" >
      < Modal.Title id = "contained-modal-title" >
      Login < /Modal.Title> < /Modal.Header> < Modal.Body >
      Login Here < /Modal.Body> < /Modal>
  }
}

export default ModalWindow

A.js, B.js, C.js

import ModalWindow from 'ModalWindow.js'

class A extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.refs.modal.show() //to show the modal
    this.refs.modal.hide() //to hide the modal
  }
  render() {
    return <ModalWindow container={this} ref = "modal" / >
  }
}

export default A
Pranesh Ravi
  • 18,642
  • 9
  • 46
  • 70
7

I highly recommend the approach that Dan Abramov described in How can I display a modal dialog in Redux that performs asynchronous actions? . Basically, have a central component that is responsible for displaying modals, and dispatch actions that give the name of the modal to open and any values to pass along as props.

Community
  • 1
  • 1
markerikson
  • 63,178
  • 10
  • 141
  • 157