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.