Sticky: active prop doesn't reset sticky state

[laukaichung]

Steps

Create two sticky components , one on the left, and one on the right.
The right one should be inactive in default.
The left one has an onStick event to update the state to make the right sticky active.

Expected Result

The right sticky should become active after the left sticky fires onStick event.

Actual Result

The active prop doesn't seem to update on state change. The right sticky remains inactive.

Version

0.73.1

Testcase

https://codepen.io/anon/pen/xXwBxj (Invalid example, please read post 2)

[layershifter]

-this.state.rActive = bool
+this.setState({ rActive: bool})

Your component will never receive update in this case. Don't mutate React's state directly, use setState().

[laukaichung]

@layershifter ,thank you for the correction. I've made a simpler example to illustrate the problem:
This example has a button in the middle of Text placeholders to toggle the active state.
There's no issue when the sticky is inactive in default: https://codepen.io/anon/pen/RLWXpo

But when the sticky is active in default, and it's changed to inactive in the middle of sticking/scrolling,
it's still sticking: https://codepen.io/anon/pen/WZQVLa

[layershifter]

We should call also this.setState({ sticky: false }) in componentWillReceiveProps(), this will disable Sticky styles.

[laukaichung]

Tried it, but componentWillReceiveProps() never gets called on the button click. https://codepen.io/anon/pen/RLWXpo

[layershifter]

PR was opened #2083.