@@ -53,46 +53,35 @@ const customStyles = {
5353// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
5454Modal .setAppElement (' #yourAppElement' )
5555
56- class App extends React .Component {
57- constructor () {
58- super ();
59-
60- this .state = {
61- modalIsOpen: false
62- };
63-
64- this .openModal = this .openModal .bind (this );
65- this .afterOpenModal = this .afterOpenModal .bind (this );
66- this .closeModal = this .closeModal .bind (this );
56+ function App (){
57+ var subtitle;
58+ const [modalIsOpen ,setIsOpen ] = React .useState (false );
59+ function openModal () {
60+ setIsOpen (true );
6761 }
6862
69- openModal () {
70- this .setState ({modalIsOpen: true });
71- }
72-
73- afterOpenModal () {
63+ function afterOpenModal () {
7464 // references are now sync'd and can be accessed.
75- this . subtitle .style .color = ' #f00' ;
65+ subtitle .style .color = ' #f00' ;
7666 }
7767
78- closeModal () {
79- this . setState ({modalIsOpen : false } );
68+ function closeModal (){
69+ setIsOpen ( false );
8070 }
8171
82- render () {
8372 return (
8473 < div>
85- < button onClick= {this . openModal }> Open Modal< / button>
74+ < button onClick= {openModal}> Open Modal< / button>
8675 < Modal
87- isOpen= {this . state . modalIsOpen }
88- onAfterOpen= {this . afterOpenModal }
89- onRequestClose= {this . closeModal }
76+ isOpen= {modalIsOpen}
77+ onAfterOpen= {afterOpenModal}
78+ onRequestClose= {closeModal}
9079 style= {customStyles}
9180 contentLabel= " Example Modal"
9281 >
9382
94- < h2 ref= {subtitle => this . subtitle = subtitle }> Hello< / h2>
95- < button onClick= {this . closeModal }> close< / button>
83+ < h2 ref= {_subtitle => ( subtitle = _subtitle) }> Hello< / h2>
84+ < button onClick= {closeModal}> close< / button>
9685 < div> I am a modal< / div>
9786 < form>
9887 < input / >
@@ -104,7 +93,6 @@ class App extends React.Component {
10493 < / Modal>
10594 < / div>
10695 );
107- }
10896}
10997
11098ReactDOM .render (< App / > , appElement);
0 commit comments