react modal using child element for the link trigger

InfoModal.js

import React            from 'react';
import { Router, Link } from 'react-router';

import Modal            from 'react-modal';
import Slider           from '../components/Slider.js';
import Metric           from '../components/Metric.js';
import DEFAULTS         from '../config/defaults.js';

var appElement  = document.getElementById('mount');
Modal.setAppElement(appElement);



export default React.createClass({

    getInitialState: function() {
        return {
            modalIsOpen: false
        };
    },

    openModal: function() {
        this.setState({
            modalIsOpen: true
        });
    },

    closeModal: function() {
        this.setState({
            modalIsOpen: false
        });
    },


    render() {
        var label = this.props.label || 'Close';

        return (
            <span>
                <span onClick={this.openModal}>
                    {this.props.children[0]}
                </span>
                <Modal
                    isOpen={this.state.modalIsOpen}
                    closeTimeoutMS={500}
                    onRequestClose={this.closeModal}>
                    <div className='card' >
                        <div  className='card__body'>
                            {this.props.children[1]}
                        </div>
                        <div className='card__action'>
                            <a className="link" onClick={this.closeModal} ref="close">
                                {label}
                            </a>
                        </div>
                    </div>
                </Modal>
            </span>
        );
    }
});