How to display a react-bootstrap modal from another component

Question

I have a Meteor+React application which I'm developing where I want to implement the login/registration functionality in a modal. I'm not sure how to open the modal from clicking my sign up or log in buttons

I have the following two components:

ui/components/main-layout/header/LoggedOutNav.jsx

import React, { Component } from 'react'

export default class LoggedOutNav extends Component {
    render() {
        return(
            <ul className="nav navbar-nav">
                <li>
                    <a href="#">
                        <i className="fa fa-sign-in" aria-hidden="true"></i>
                        &nbsp;
                        Log In
                    </a>
                </li>
                <li>
                    <a href="#loginRegistration">
                        <i className="fa fa-user-plus" aria-hidden="true"></i>
                        &nbsp;
                        Sign Up
                    </a>
                </li>
            </ul>
        )
    }
}

ui/components/modals/LoginRegistration.jsx

import React, { Component } from 'react'
import { Modal } from 'react-bootstrap'

export default class LoginRegistration extends Component {
    getInitialState() {
        return { showModal: false }
    }

    close() {
        this.setState({ showModal: false })
    }

    open() {
        this.setState({showModal: true})
    }

    render() {
        return (
            <Modal show={this.state.showModal} onHide={this.close}>
                {/* Irrelevant modal code here */}
            </Modal>
        )
    }
}

How could I accomplish opening the modal from my other component?

Oh, typo then? :) You can do this by creating a function to your modal component and then call that function by using `refs` from the parent component. Quite easy actually. There are already answers to this question, lemme see if I can find one... — Chris, Apr 04 '17 at 14:12
Are you using redux ? Is the `LoginRegistration ` component defined in the parent component of `LoggedOutNav ` if this is the case you can call a handler to trigger the opening of the modal — Olivier Boissé, Apr 04 '17 at 14:12

Chad · Accepted Answer · 2017-04-04T14:34:33.913

import React, { Component } from 'react'
import { Modal } from 'react-bootstrap'

export default class LoggedOutNav extends Component {
    constructor(){
        this.state = {
            showModal: false,
            activeModal: ''
        }

        this.modalDisplay = this.modalDisplay.bind(this);
    }
    modalDisplay(e){
        this.setState({
            showModal: !this.state.showModal,
            activeModal: e.target.getAttribute('data-tab')
        });
    }
    render() {
        return(
            <div>
                <ul className="nav navbar-nav">
                    <li 
                        onClick={ this.showModal }
                        data-tab = 'login'>
                        <a href="#">
                            <i className="fa fa-sign-in" aria-hidden="true"></i>
                            &nbsp;
                            Log In
                        </a>
                    </li>
                    <li
                        onClick={ this.showModal }
                        data-tab = 'signup'>
                        <a href="#loginRegistration">
                            <i className="fa fa-user-plus" aria-hidden="true"></i>
                            &nbsp;
                            Sign Up
                        </a>
                    </li>
                </ul>
                <div>
                    {
                        this.state.showModal
                        &&
                        <Modal modalType={ this.state.activeModal } onHide={this.modalDisplay} data-tab= ""/>
                    }
                </div>
            </div>
        )
    }
}

You could pass the modal type into the Modal component, or use a ternary operator to render

{
  this.state.activeModal === 'login' ? 
    <Login /> : 
    <SignUp />
}

How to display a react-bootstrap modal from another component

1 Answers1