@@ -144,9 +144,9 @@ You can use this to remove scrolling on the the body while the modal is open.
144144Inside an app:
145145
146146``` js
147- var React = require ( ' react' ) ;
148- var ReactDOM = require ( ' react-dom' ) ;
149- var Modal = require ( ' react-modal' ) ;
147+ import React from ' react' ;
148+ import ReactDOM from ' react-dom' ;
149+ import Modal from ' react-modal' ;
150150
151151
152152/*
@@ -161,7 +161,7 @@ Modal.setAppElement(appElement);
161161Modal.setAppElement('#your-app-element');
162162
163163*/
164- var appElement = document .getElementById (' your-app-element' );
164+ const appElement = document .getElementById (' your-app-element' );
165165
166166
167167
@@ -177,26 +177,33 @@ const customStyles = {
177177};
178178
179179
180- var App = React .createClass ({
180+ class App extends React .Component {
181+ constructor () {
182+ super ();
181183
182- getInitialState : function () {
183- return { modalIsOpen: false };
184- },
184+ this .state = {
185+ modalIsOpen: false
186+ };
187+
188+ this .openModal = this .openModal .bind (this );
189+ this .afterOpenModal = this .afterOpenModal .bind (this );
190+ this .closeModal = this .closeModal .bind (this );
191+ }
185192
186- openModal : function () {
193+ openModal () {
187194 this .setState ({modalIsOpen: true });
188- },
195+ }
189196
190- afterOpenModal : function () {
197+ afterOpenModal () {
191198 // references are now sync'd and can be accessed.
192199 this .refs .subtitle .style .color = ' #f00' ;
193- },
200+ }
194201
195- closeModal : function () {
202+ closeModal () {
196203 this .setState ({modalIsOpen: false });
197- },
204+ }
198205
199- render : function () {
206+ render () {
200207 return (
201208 < div>
202209 < button onClick= {this .openModal }> Open Modal< / button>
@@ -222,9 +229,9 @@ var App = React.createClass({
222229 < / div>
223230 );
224231 }
225- });
232+ }
226233
227- ReactDOM .render (< App/ > , appElement);
234+ ReactDOM .render (< App / > , appElement);
228235```
229236# Testing
230237
0 commit comments