Handling events on ReactJS

Question

I am new to ReactJS and trying to create a modal window component using ReactJS and ran into some trouble. I have a link to trigger the modal window and would like it the component to toggle between 'show' and 'hide' when clicked on the trigger link.

Below is my code:

The component where I am calling the ModalDialog component:

import React from 'react';
import styles from './Cover.css';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
import ModalDialog from '../ModalDialog';
import Avatar from './Avatar';

import { Button } from 'react-bootstrap';

@withStyles(styles)

class Cover {

  render() {
    return (
      <div className="Cover">

        <a href="#" onClick={}></a>

        <ModalDialog heading="heading">
          <p>Body</p>
        </ModalDialog>
        <div className="Cover-container">
          <div>
            <Avatar 
              username="hilarl" 
              profession="Web Developer" 
              location="New York, New York"
              status="I am here to protect my business, a bunch of kids are out to ruin me" />
              <div className="Cover-submenu-container">
                <div className="Cover-submenu-section">
                  .
                </div>
                <div className="Cover-submenu-section links">
                  <a href="#" className="Cover-submenu-link">
                    <i className="fa fa-twitter"></i>
                  </a>
                </div>
                <div className="Cover-submenu-section connect-menu">
                  <Button bsStyle='primary' href="/follow" onClick={Link.handleClick}>Follow</Button>
                </div>
              </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Cover;


The ModalDialog Component:

import React from 'react';
import styles from './ModalDialog.css';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';

import { Button } from 'react-bootstrap';

@withStyles(styles)

class ModalDialog {

  render() {
    return (
      <div className="Overlay">
        <Modal heading={this.props.heading}>
          <div>{this.props.children}</div>
        </Modal>
      </div>
    );
  }
};

class Modal {

  render() {
    return (
      <div className="Modal effect" >
        <h3>{this.props.heading}</h3>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    );
  }
};

export default ModalDialog;

I have set visibility to be hidden by default and trying to set a .show class to make it visible:

.Overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  background: rgba(255,255,255,0.9);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.show ~ .Overlay  {
  opacity: 1;
  visibility: visible;
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  backface-visibility: visible;
}

Any help much appreciated. Thanks

Answer 1

I learnt the hard way that in React it is better either to render or not to render. Changing the show/hide css class is sort of imperative/jQuerish mindset. Instead of telling React how to achieve hide/show, tell React what you want to render.

import Modal from './Modal';

class Cover extends React.Component {

    constructor() {
        this.state = { showModal: false };
    } 

    handleClick(event) {
        this.setState({ showModal: true });
    }

    render() {

        return (
            <div>
                <Modal show={this.state.showModal} />
                <button onClick={this.handleClick.bind(this)}>
                    Click me!
                </button>
            </div>
        );
    }
}


class Modal extends React.Component {
    render() {
        if (this.props.show) {
            return (/* The modal panel */);
        }
        return null;
    }
}