CODEWITHSUNDEEP
javascriptreactjs
RED
RED

Reputation: 57

componentWillReceiveProps on react does not pass the current property when ever it triggers

Hello guys I'm new to react I'm working with react component passing a property from a state of parent component and I'm not sure why i get an undefined property error whenever i trigger and event from the parent component

You can visit the code here@ https://codepen.io/private_ryan/pen/RVBdpO?editors=0011#live-view show console and click the edit button

SampleTable Component

 constructor(props, context) {
    super(props);
    this.state = { UPD:[] };
}

updateRow(x) {
    var array = this.state.TRs;
    var index = array.findIndex(e => e.id == x);
    this.setState({
        UPD: this.state.TRs[index]
    });
}

render() {
    return (<AddFormData onAdd={ this.onAddForm } 
               upd={ this.state.UPD } 
               updcan={ this.cancelUpd } 
               propUpd= { this.propcessUpd } />
             <button onClick={ this.updateRow} value={ some.id } >click me</button>
     );
}

AddFormData Component

 constructor(props) {
    super(props);
    this.state = { textName: '', textArea: '' };
}

componentWillReceiveProps(){
    console.log( this.props ) // undefined no props when first click
    // set the state here
}

Upvotes: 0

Views: 417

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104379

componentWillReceiveProps will get called whenever you do any changes in props values in parent component, new values will get passed as parameter and after this lifecycle method this.props will get updated so if you do console.log(this.props) inside this it will log the previous value not the new one.

Use this:

componentWillReceiveProps(newProps){
    console.log(this.props.upd.id, newProps)
}

Check the working example.

Upvotes: 0

ハセン
ハセン

Reputation: 387

New props are received as parameters to the function:

componentWillReceiveProps(nextProps)

https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

Upvotes: 1

Related Questions