Graf009/demo.js

## demo.js
import React, { Component } from 'react';
import Modal from 'react-modal';
import { Textfield, Button, Grid, Cell } from 'react-mdl';
import 'react-mdl/extra/material.js';
import 'react-mdl/extra/material.css';

const mountModal = document.getElementById('modal');
const mountApp = document.getElementById('app');
Modal.setAppElement(mountModal);
Modal.injectCSS();

export default class Login extends Component {
  state = {
    isOpen: false,
  };

  handleOpenButton() {
    this.setState({ isOpen: true });
  }

  render() {
    const { isOpen } = this.state;

    return (
      <div>
        <Button raised colored accent onClick={ ::this.handleOpenButton }>Open</Button>
        <Modal isOpen={ isOpen }>
          <div className="modal_content">
            <Grid>
              <Cell col={ 12 }>
                <Textfield
                  label="Login"
                  onChange={() => {}}
                  floatingLabel={true}
                  style={{width: '200px'}}
                  />
              </Cell>
              <Cell col={ 12 }>
                <Textfield
                  type="password"
                  label="Password"
                  onChange={() => {}}
                  floatingLabel={true}
                  style={{width: '200px'}}
                  />
              </Cell>
              <Cell col={ 4 }>
                <Button raised colored>LOG IN</Button>
              </Cell>
            </Grid>
          </div>
        </Modal>
      </div>
    );
  }
}

React.render(
  <Login />,
  mountApp);

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset='utf-8'>
  <title>Demo error firstChild</title>
</head>
<body>
  <div id="app" class="next"></div>
  <div id="modal"></div>
  <script src="/bundle.js"></script>
</body>
</html>
	import React, { Component } from 'react';
	import Modal from 'react-modal';
	import { Textfield, Button, Grid, Cell } from 'react-mdl';
	import 'react-mdl/extra/material.js';
	import 'react-mdl/extra/material.css';

	const mountModal = document.getElementById('modal');
	const mountApp = document.getElementById('app');
	Modal.setAppElement(mountModal);
	Modal.injectCSS();

	export default class Login extends Component {
	state = {
	isOpen: false,
	};

	handleOpenButton() {
	this.setState({ isOpen: true });
	}

	render() {
	const { isOpen } = this.state;

	return (
	<div>
	<Button raised colored accent onClick={ ::this.handleOpenButton }>Open</Button>
	<Modal isOpen={ isOpen }>
	<div className="modal_content">
	<Grid>
	<Cell col={ 12 }>
	<Textfield
	label="Login"
	onChange={() => {}}
	floatingLabel={true}
	style={{width: '200px'}}
	/>
	</Cell>
	<Cell col={ 12 }>
	<Textfield
	type="password"
	label="Password"
	onChange={() => {}}
	floatingLabel={true}
	style={{width: '200px'}}
	/>
	</Cell>
	<Cell col={ 4 }>
	<Button raised colored>LOG IN</Button>
	</Cell>
	</Grid>
	</div>
	</Modal>
	</div>
	);
	}
	}

	React.render(
	<Login />,
	mountApp);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset='utf-8'>
	<title>Demo error firstChild</title>
	</head>
	<body>
	<div id="app" class="next"></div>
	<div id="modal"></div>
	<script src="/bundle.js"></script>
	</body>
	</html>