Skip to content

Commit 5f9a0cc

Browse files
authored
Use "componentDidUpdate" (#51)
...instead of "componentWillReceiveProps"
1 parent 02294d0 commit 5f9a0cc

File tree

3 files changed

+21
-16
lines changed

3 files changed

+21
-16
lines changed

examples/component/src/Container.purs

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ component = React.stateless { displayName: "Container", render }
1010
render _ =
1111
R.div
1212
{ children:
13-
[ React.element ToggleButton.component { on: true }
14-
, React.element ToggleButton.component { on: false }
13+
[ React.element ToggleButton.component { label: "A" }
14+
, React.element ToggleButton.component { label: "B" }
1515
]
1616
}

examples/component/src/ToggleButton.purs

+14-7
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,27 @@ import React.Basic.DOM as R
77
import React.Basic.Events as Events
88

99
type Props =
10-
{ on :: Boolean
10+
{ label :: String
1111
}
1212

1313
component :: React.Component Props
1414
component = React.component { displayName: "ToggleButton", initialState, receiveProps, render }
1515
where
1616
initialState =
17-
{ on: false }
17+
{ on: false
18+
}
1819

19-
receiveProps { props, setState } =
20-
setState _ { on = props.on }
20+
receiveProps _ =
21+
pure unit
2122

22-
render { state, setState } =
23+
render { props, state, setState } =
2324
R.button
24-
{ onClick: Events.handler_ (setState \s -> s { on = not s.on })
25-
, children: [ R.text if state.on then "On" else "Off" ]
25+
{ onClick: Events.handler_ do
26+
setState \s -> s { on = not s.on }
27+
, children:
28+
[ R.text props.label
29+
, R.text if state.on
30+
then " On"
31+
else " Off"
32+
]
2633
}

src/React/Basic.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,18 @@ exports.component_ = function(spec) {
2121
state: this.state,
2222
setState: this._setState,
2323
setStateThen: this._setState,
24-
instance_: this,
24+
instance_: this
2525
});
2626
};
2727

28-
Component.prototype.componentWillReceiveProps = function componentWillReceiveProps(
29-
newProps
30-
) {
28+
Component.prototype.componentDidUpdate = function componentDidUpdate() {
3129
spec.receiveProps({
3230
isFirstMount: false,
33-
props: newProps,
31+
props: this.props,
3432
state: this.state,
3533
setState: this._setState,
3634
setStateThen: this._setState,
37-
instance_: this,
35+
instance_: this
3836
});
3937
};
4038

@@ -44,7 +42,7 @@ exports.component_ = function(spec) {
4442
state: this.state,
4543
setState: this._setState,
4644
setStateThen: this._setState,
47-
instance_: this,
45+
instance_: this
4846
});
4947
};
5048

0 commit comments

Comments
 (0)