Modal Not loading in React using materialize css

Question

I am new to React and I am trying to create a modal using materialize.css http://materializecss.com

My Login page looks like this

import React from 'react';
var Modal=require('Modal');

class login extends React.Component{
constructor(props){
    super(props);
    this.state={
        view: {showModal: false}
    }
    this.handleHideModal=this.handleHideModal.bind(this);
    this.handleShowModal=this.handleShowModal.bind(this);

}
handleHideModal(){
    this.setState({view: {showModal: false}})
}
handleShowModal(){
    $('#modal1').modal('open');
}
componentDidMount(){
    $('#modal1').modal('open');
}
render(){
return(
    <div>
        <div className="login">
            <div className="">
                <div className="input-field col s8">
                    <i className="material-icons prefix">account_circle</i>
                    <input  id="username" type="text" className="validate"/>
                    <label htmlFor="username">User Name</label>
                </div>
                <div className="input-field col s8">
                    <i className="material-icons prefix">vpn_key</i>
                    <input id="password" type="password" className="validate"/>
                    <label htmlFor="password">Password</label>
                </div>
                <div className="center input-field col s6">
                        <input type="checkbox" className="filled-in" id="filled-in-box" defaultChecked="checked" />
                        <label htmlFor="filled-in-box">Remember me</label>
                </div>
                <div className="center input-field col s12">
                    <a className="login-button waves-effect waves-light btn center">Login</a>
                </div>
                <div className="row input-field col s12">
                    <div className="col s6 left-align">
                        <a className="modal-trigger " onClick={this.handleShowModal} >Register Now</a>
                    </div>
                    <div className="col s6 right-align">
                        <a>Forgot Password?</a>
                    </div>
                </div>
            </div>
        </div>
        {this.state.view.showModal ? <Modal handleHideModal={this.handleHideModal}/>:null}
    </div>
);
}
};

module.exports= login;

My modal component looks like this.

import React from 'react';
import ReactDOM from 'react-dom';

class Modal extends React.Component{
componentDidMount(){
    //var modal = new Foundation.Reveal($('#modal1'));
    //modal.open();
    $('#modal1').open();
    $(ReactDOM.findDOMNode('#modal1')).modal('show');
    //$(ReactDOM.findDOMNode(this)).on('hidden.bs.modal', this.props.handleHideModal);
}
render(){
    return(
        <div id="modal1" className="modal">
            <div className="modal-content">
                <h4>Modal Header</h4>
                <p>A bunch of text</p>
            </div>
            <div className="modal-footer">
                <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
            </div>
        </div>
    );
}
propTypes:{
    handleHideModal: React.PropTypes.func.isRequired
}
};

module.exports = Modal;

I tried a lot of suggestions found on the internet, nothing worked out. I am not understanding what the issue is.

Answer 1

Use React Materialize

Install:

npm install react-materialize

Import:

import {Modal, Button, Icon} from 'react-materialize'

Code:

<Modal
  header='Modal Header'
  trigger={<Button waves='light'>OR ME!<Icon right>insert_chart</Icon></Button>}>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
</Modal>

Source: https://react-materialize.github.io/#/

Answer 2

In React, you should not access elements via document.getElementById or via querySelector (or your jQuery-like $ function) directly. Facebook is addressing this at https://facebook.github.io/react/docs/refs-and-the-dom.html

But to answer your question, I would suggest to change the behaviour to something like this:

import React from 'react';
var Modal=require('Modal');

class login extends React.Component{
constructor(props){
    super(props);
    this.state={
        view: {showModal: false}
    }
    this.handleHideModal=this.handleHideModal.bind(this);
    this.handleShowModal=this.handleShowModal.bind(this);

}
handleHideModal(){
    this.setState({view: {showModal: false}})
}
handleShowModal(){
    this.setState({view: {showModal: true}})
}

render(){
return(
    <div>
        <div className="login">
            <div className="">
                <div className="input-field col s8">
                    <i className="material-icons prefix">account_circle</i>
                    <input  id="username" type="text" className="validate"/>
                    <label htmlFor="username">User Name</label>
                </div>
                <div className="input-field col s8">
                    <i className="material-icons prefix">vpn_key</i>
                    <input id="password" type="password" className="validate"/>
                    <label htmlFor="password">Password</label>
                </div>
                <div className="center input-field col s6">
                        <input type="checkbox" className="filled-in" id="filled-in-box" defaultChecked="checked" />
                        <label htmlFor="filled-in-box">Remember me</label>
                </div>
                <div className="center input-field col s12">
                    <a className="login-button waves-effect waves-light btn center">Login</a>
                </div>
                <div className="row input-field col s12">
                    <div className="col s6 left-align">
                        <a className="modal-trigger " onClick={this.handleShowModal} >Register Now</a>
                    </div>
                    <div className="col s6 right-align">
                        <a>Forgot Password?</a>
                    </div>
                </div>
            </div>
        </div>
        <Modal handleHideModal={this.handleHideModal} show={this.state.view.showModal}/>
    </div>
);
}
};

module.exports= login;

and for the Modal Component you need to react on the show property that we are passing:

import React from 'react';

class Modal extends React.Component{

render(){
    return(
        <div id="modal1" className={this.props.show ? 'modal open' : 'modal'}>
            <div className="modal-content">
                <h4>Modal Header</h4>
                <p>A bunch of text</p>
            </div>
            <div className="modal-footer">
                <a href="#!" className="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
            </div>
        </div>
    );
}
propTypes:{
    handleHideModal: React.PropTypes.func.isRequired,
    show: React.PropTypes.bool.isRequired,
}
};

module.exports = Modal;

I don't know if the 'modal open' css part in render method of your Modal Component is the correct classname for opening this modal window in your css framework but i think you get the idea.

Edit: If changing the class to open alone does not work you should think of adding a react implementation of materialize css like this one: https://github.com/react-materialize/react-materialize.

Adding a modal there is as simple as this: https://react-materialize.github.io/modals.html

You will just need to put the modal in your modal component:

import React from 'react';
import { Modal } from 'react-materialize';

class Modal extends React.Component{

render(){
    return(
        <Modal
          header='Modal Header'
          trigger={
            <Button waves='light'>MODAL</Button>
          }>
          <p>Lorem ipsum dolor sit amet</p>
        </Modal>
    );
}
propTypes:{
    handleHideModal: React.PropTypes.func.isRequired,
    show: React.PropTypes.bool.isRequired,
}
};

module.exports = Modal;