eip56 eip56 - 1 year ago 205
React JSX Question

React Redux Lifecycle Props

I am using react and redux for an web application I am building.

For the most part everyhthing is working just fine however I have one major issue when it comes to passing props from the parent.

I have a main component which connects to redux and obtains my store. I pass the props just fine:

{ this.props.children && React.cloneElement(
preset: this.state.preset,
children: this.state.babies,
child: this.state.currentChild,
name: this.state.firstName,

So my particular page gets this props. I then pass needed props to child components, however I cannot access the props on mount or any other lifecycle method that react provides. The only place they seem to be available is in the render method, and thats after running a undefined check:

let child = this.props.child;

if(child.birthdate != undefined) {
// do stuff here

It looks like i receive undefined twice then props finally come in and I am able to work with them.

My question is what lifecycle component should i be accessing to format my data. I have ran all available methods in the docs to try to console.log and see where I am at but they all return empty. The only place I actually get the props in in the render.

My explanation is poor i know but any help would be appreciated.


Answer Source

componentWillReceiveProps lifecycle method should do a trick. You can get a prop that is incoming and format it there. After that you can set formatted data in component state and use it in your method like this.

componentWillReceiveProps(nextProps) {
    formattedBirthdate: nextProps.child.birthdate

The second option will be to do the same in your constructor.

After that you can output your formattedBirthdate in render, like this:

this.state.formattedBirthdate && <div>{this.state.formattedBirthdate}</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download