ReactJS Modal as component

Question

How do I create a modal using Reactjs? I am just using the CSS from Bootstrap's modal (none of the JS).

I have created a modal component:

import React from 'react';

class Modal extends React.Component {
    constructor() {
        super();
    }

    componentWillMount() {
        this.setState({
            open: false
        })
    }

    onClick() {
        this.setState({
            open: !this.state.open
        })
    }

    render() {
        return (
            <div class="modal fade" tabindex="-1" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">{this.props.title}</h4>
                        </div>
                        <div class="modal-body">
                            {this.props.children}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Modal;

I want to call it from in here somehow:

import React from 'react';
import UrgencyToggle from './UrgencyToggle';
import ApproveButton from './ApproveButton';
import ShippingTable from './ShippingTable';
import DropdownButtonList from '../global/DropdownButtonList';
import Modal from '../global/Modal';

export default class Job extends React.Component {
    setUrgency(urgency) {
        actionContext.dispatch('SET_JOB_URGENCY', { data: urgency})
    };
    changeTrader(e) {

    }
    changeOft() {

    }
    render() {
        return (
<div className="row users">
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">Trader</span>
                                        <span className="name">{this.props.job.user_name}<img
                                            src="/images/system-icons/pencil.png" width="13"
                                            onClick={this.changeTrader}
                                            title="Change which trader owns this job."/></span>
                                </div>
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">CEX</span>
                                        <span
                                            className="name">{this.props.job.cex_user_name ? this.props.job.cex_user_name : 'None assigned'}</span>

                                </div>
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">OFT</span>
                                        <span
                                            className="name">{this.props.job.oft_user_name ? this.props.job.oft_user_name : 'None assigned'}<img
                                            title="Set the OFT user for this job." src="/images/system-icons/pencil.png"
                                            onClick={this.changeOft}
                                            width="13"/></span>
                                </div>
                            </div>
               )
    }
};

---

Modal:

import React from 'react';

class Modal extends React.Component {
    constructor() {
        super();
    }

    render() {
        let open = this.props.open;
        return (
            <div className={'modal fade'+(open ? '' : 'hide')} tabindex="-1" role="dialog">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 className="modal-title">{this.props.title}</h4>
                        </div>
                        <div className="modal-body">
                            {this.props.children}
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" className="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Modal;

Job:

    import React from 'react';
    import UrgencyToggle from './UrgencyToggle';
    import ApproveButton from './ApproveButton';
    import ShippingTable from './ShippingTable';
    import DropdownButtonList from '../global/DropdownButtonList';
    import Modal from '../global/Modal';

    export default class Job extends React.Component {
        constructor(props) {
            super(props);
            this.toggleModal = this.toggleModal.bind(this);
            this.state = {open: false}
        }

        setUrgency(urgency) {
            actionContext.dispatch('SET_JOB_URGENCY', { data: urgency})
        };
        toggleModal() {
            this.setState({
                open: this.state.modal
            });
        }
        render() {
            return (
<div className="row users">
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">Trader</span>
                                        <span className="name">{this.props.job.user_name}<img
                                            src="/images/system-icons/pencil.png" width="13"
                                            onClick={this.toggleModal}
                                            title="Change which trader owns this job."/></span>
                                </div>
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">CEX</span>
                                        <span
                                            className="name">{this.props.job.cex_user_name ? this.props.job.cex_user_name : 'None assigned'}</span>

                                </div>
                                <div className="col-xs-12 col-sm-4">
                                    <span className="title">OFT</span>
                                        <span
                                            className="name">{this.props.job.oft_user_name ? this.props.job.oft_user_name : 'None assigned'}<img
                                            title="Set the OFT user for this job." src="/images/system-icons/pencil.png"
                                            onClick={this.toggleModal}
                                            width="13"/></span>
                                </div>
                            </div>
            )
        }
    };

Answer 1

Control your Modal 's state from the parent component Job . The calling function which activates/deactivates the Modal should also lie inside the parent Job component.

export class Modal extends React.Component {
  // this.props.open holds the value whether the modal is open or not
  // this.props.toggleModal holds the function for opening/closing modal

  render() {
    let open = this.props.open;
    // return JSX
  }
}

Inside your job component, pass this.state.open and this.toggleModal function as props to Modal Component.

export default class Job extends React.Component {

  constructor(props) {
    super(props);
    this.toggleModal = this.toggleModal.bind(this);
    this.state = {
      open: false,
    }
  }

  toggleModal() {
    this.setState({
      open: this.state.modal,
    });
  }

  render() {
    return (
      <div>
        {/* your JSX */}
        <Modal open={this.state.open} toggleModal={this.toggleModal} />
      </div>
    )
  }
}

Answer 2

You can also use this to declare your default props, since you are using one

static propTypes = { open: PropTypes.bool, };

static defaultProps = { open: false //default };