Use "componentDidUpdate" (#51)

...instead of "componentWillReceiveProps"
purescript-react · Aug 16, 2018 · 5f9a0cc · 5f9a0cc
1 parent 02294d0
commit 5f9a0cc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/examples/component/src/Container.purs b/examples/component/src/Container.purs
@@ -10,7 +10,7 @@ component = React.stateless { displayName: "Container", render }
     render _ =
       R.div
         { children:
-            [ React.element ToggleButton.component { on: true }
-            , React.element ToggleButton.component { on: false }
+            [ React.element ToggleButton.component { label: "A" }
+            , React.element ToggleButton.component { label: "B" }
             ]
         }
diff --git a/examples/component/src/ToggleButton.purs b/examples/component/src/ToggleButton.purs
@@ -7,20 +7,27 @@ import React.Basic.DOM as R
 import React.Basic.Events as Events
 
 type Props =
-  { on :: Boolean
+  { label :: String
   }
 
 component :: React.Component Props
 component = React.component { displayName: "ToggleButton", initialState, receiveProps, render }
   where
     initialState =
-      { on: false }
+      { on: false
+      }
 
-    receiveProps { props, setState } =
-      setState _ { on = props.on }
+    receiveProps _ =
+      pure unit
 
-    render { state, setState } =
+    render { props, state, setState } =
       R.button
-        { onClick: Events.handler_ (setState \s -> s { on = not s.on })
-        , children: [ R.text if state.on then "On" else "Off" ]
+        { onClick: Events.handler_ do
+            setState \s -> s { on = not s.on }
+        , children:
+            [ R.text props.label
+            , R.text if state.on
+                       then " On"
+                       else " Off"
+            ]
         }
diff --git a/src/React/Basic.js b/src/React/Basic.js
@@ -21,20 +21,18 @@ exports.component_ = function(spec) {
       state: this.state,
       setState: this._setState,
       setStateThen: this._setState,
-      instance_: this,
+      instance_: this
     });
   };
 
-  Component.prototype.componentWillReceiveProps = function componentWillReceiveProps(
-    newProps
-  ) {
+  Component.prototype.componentDidUpdate = function componentDidUpdate() {
     spec.receiveProps({
       isFirstMount: false,
-      props: newProps,
+      props: this.props,
       state: this.state,
       setState: this._setState,
       setStateThen: this._setState,
-      instance_: this,
+      instance_: this
     });
   };
 
@@ -44,7 +42,7 @@ exports.component_ = function(spec) {
       state: this.state,
       setState: this._setState,
       setStateThen: this._setState,
-      instance_: this,
+      instance_: this
     });
   };