Recompose: How to access props from lifecycle?

[ChenLi0830]

In my current component, the lifecycle methods call methods in props. For example,

      componentWillMount() {
        this.props.onEnterScreen();
      }

      componentDidMount() {
        this.props.toggleModal();
      }

Now I want to rewrite it using recompose's lifecycle as shown below, how do I access the props?

lifecycle({
      componentWillMount() {
        props.onEnterScreen(); // <-- props is not defined
      },
})

[TrySound]

@ChenLi0830 Same way. All methods just extend component class and use it context. It's not quite clean and will be deprecated some day.

[ChenLi0830]

Thank you @TrySound, do you mean I can access the props using this.props?

[TrySound]

Yep

[TrySound]

@istarkov We need to update docs

[timkindberg]

Please do not deprecate lifecycle! I use it quite often.

[ChenLi0830]

It worked, thanks a lot @TrySound!
Closing this issue.

[nick121212]

it worked,thanks a lot @TrySound
lifecycle({ componentDidMount: ()=> { this.props.getList(this.props); } } not worked yet

[wuct]

@nick121212 because this in an arrow function doesn't refer to the class instance. This behavior is from ECMAScript.

[iamdanthedev]

Thanks @wuct , I somehow missed this fact and was struggling for 15 minutes %)

[shawnmmatthews]

I'm getting undefined on

export const fetchOptions= lifecycle({  
  componentDidMount() {
   this.props.dispatch(change('form', 'test', this.props.test)); 
  }
});

Any thoughts?

[TrySound]

@shawnmmatthews Just use class.

[shawnmmatthews]

@TrySound, Thanks for the response. Just confirming you are saying just use a class on the markup component vs trying to handle this in the HOC

[dmitryrn]

For use this in lifeCyrcle method you need to write like this:

lifecycle({
  componentDidMount() { this.props.some /* YES */ }
  // `this` is binded to wrapper class component
})

Instead of:

lifecycle({
  componentDidMount: () => { this.props.some /* NO */ }
})

Arrow function using parent's context.

[mauroporras]

I agree with @TrySound, at that point is seems better just to use a class.

[LaloHao]

The class would imply all the noise of binding "this" to all handlers + "this.state" in the constructor + props splicing in the render method though

[TrySound]

@LaloHao And how lifecycle HOC solves any of it? It's just a wrapper around class with all class problems.
https://github.com/acdlite/recompose/blob/master/src/packages/recompose/lifecycle.js

[LaloHao]

In the same sense any computer language solves the abstraction of writing
direct processor operations

El mié., 8 de ago. de 2018 12:27 PM, Bogdan Chadkin <
[email protected]> escribió:

@LaloHao https://github.com/LaloHao And how lifecycle HOC solves any of
it? It's just a wrapper around class with all class problems.

https://github.com/acdlite/recompose/blob/master/src/packages/recompose/lifecycle.js

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/acdlite/recompose/issues/356#issuecomment-411487058,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADfzqkNO5L5NyaMjmRNzcHf6YmUbmR9gks5uOx-NgaJpZM4M6tG1
.

[webberwang]

So how do you access props using a stateless component?

Found this package https://www.npmjs.com/package/@hocs/with-lifecycle

[mauroporras]

@webberwang
https://medium.com/@PhilipAndrews/react-how-to-access-props-in-a-functional-component-6bd4200b9e0b

Basically like this:

const Child = (props) => {
  return (
    <div style={{backgroundColor: props.eyeColor}} />
  )
}

[webberwang]

@webberwang
https://medium.com/@PhilipAndrews/react-how-to-access-props-in-a-functional-component-6bd4200b9e0b

Basically like this:

const Child = (props) => {
  return (
    <div style={{backgroundColor: props.eyeColor}} />
  )
}

Thanks for that, I forgot to clarify in the lifecycle block. But I did find this package that integrates nicely with recompose which does that