How to use react unstated outside of render method?

Question

I am using ustated library in my project.

In render method, I am using set like this:

render() {
    return (
            <ApiSubscribe>
                {api => (
                    <button content='CLICK ME' onClick={() => api.setMessage('RENDER CLICK')} />
                )}
            </ApiSubscribe>
    )
}

How can I call api.setMessage OUTSIDE of render? For example in componentDidMount ?

ApiSubscribe is:

export const ApiSubscribe = props => {
    // We also leave the subscribe "to" flexible, so you can have full
    // control over your subscripton from outside of the module
    return <Subscribe to={props.to || [Api]}>{props.children}</Subscribe>;
};

[Looking at everything that the library exports](https://github.com/jamiebuilds/unstated/blob/master/src/unstated.d.ts), I don't think you can. — Tholle, Jul 28 '18 at 18:24
pass `api` down to a child component as a prop, and use its `componentDidMount` hook or whatever — azium, Jul 28 '18 at 19:11

azium · Answer 1 · 2018-07-28T19:36:26.297

6

Like this?

class Child extends Component {
  componentDidMount() {
    this.props.api.setMessage('hey')
  }
  render {...}
]

let Parent = () => (
  <ApiSubscribe>
    {api => <Child api={api} />}
  </ApiSubscribe>
)

edited Jul 28 '18 at 19:36

answered Jul 28 '18 at 19:15

azium

20,056
7
57
79

score 1 · Answer 2 · answered Jan 29 '19 at 01:18

1

You can create a HOC to wrap your component, then pass the container from the HOC component to the child component in the form of props.

answered Jan 29 '19 at 01:18

ttfreeman

5,076
4
26
33

Simple and effective. Thanks. – Yëco Feb 13 '19 at 15:33
can you give an example of this? – tomrlh Oct 01 '19 at 14:37

How to use react unstated outside of render method?

2 Answers2

Linked