import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ModelDialog from './modal-dialog';


 export default class ButtonRoot extends Component{
   render(){

         // Get the button that opens the modal
         var btn = document.getElementById("base-btn");

         // When the user clicks the button, open the modal
         btn.onclick = function() {
             modal.style.display = "block";
         }

     return (
       <button id='base-btn'>Order Credit</button>
     );
   }
 }

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


export default class ModelDialog extends Component {
  render(){
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    return(
      <div id="myModal" className="modal">
        <div className="modal-content">
            <span className="close">&times;</span>
            <div className="order--container">
              <p>5 IV's</p>
              <p>25 IV's</p>
              <p>50 IV's</p>
              <p>100 IV's</p>
              <p>500 IV's</p>
            </div>
            <div className="order--form">
              <form>
                <div className="tc--checkbox">
                  <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter" />
                  <label for="tcs">I accept Terms & Conditions</label>
                </div>
                <div className="order--btn">
                  <button type="submit">Order</button>
                </div>
              </form>
            </div>
        </div>
      </div>
    );
  }
}