React.js,Event Listener onChange for Specific Prop?

Question

I want to trigger a function when this.props.map is set on a React component - defined using the ES6 class syntax:

export default class MapForm extends React.Component {...

Presently, I am using componentDidUpdate() because it is triggered when the props are set - but it is also triggered from other unrelated events which isn't ideal.

On the other hand, componentWillReceiveProps() happens to early in the lifecycle of the component it seems (this.props.map returns undefined at this point)

So I want to trigger a function only when this.props.map is set.

Is there a hook I am missing? Or perhaps a certain pattern?

@nem035 and then goes on to say he is using componentDidUpdate() to do it. but that its being triggered in other places and that its not ideal. so what does he want? how to do it? how to not call it in other places? whats his attempt at doing it? — John Ruddell
– John Ruddell, Commented May 26, 2016 at 1:28
@JohnRuddell yeah, you're right. The question isn't exactly clear, I gave it an edit to ask more specifically what it seems the OP wants — nem035
– nem035, Commented May 26, 2016 at 1:30
@nem035 assuming you know what he wants :) but that may be what hes looking for — John Ruddell
– John Ruddell, Commented May 26, 2016 at 1:31

Community · Accepted Answer · 2020-06-20 09:12:55Z

if you only want to trigger it once. you can do this

componentDidUpdate(pProps){ if(!pProps.map && this.props.map){ this.props.callSomeFunc(); } }

or you can use the before render function

componentWillRecieveProps(nProps){ if(!this.props.map && nProps.map){ this.props.callSomeFunc(); } }

if you want to know when it changes to call the function (meaning it is already created but has changed to something else)

if( (!pProps.map && this.props.map) || (this.props.map !== pProps.map){

(if its an object you may want to change that second comparison to a deep one)

Both of these functions have the concept of the next or previous state of the component before and after it is updated.

componentDidUpdate means the render has finished and the component has updated. It has two arguments you can include in the function (prevProps, prevState) where it is the previous props and state of the component before it updated.

alternatively componentWillReceiveProps has the opposite side (nextProps, nextState)

with both of these we can compare the previous props or the next props of the component and see if that transition is when the map is set (aka one is undefined and the other is not)

EDIT:

to visualize whats happening so you know what the next props are (nProps) look at this.

count = 1; <SomeComponent count={count} />

now inside SomeComponent

class SomeComponent extends React.Component { componentWillReceiveProps(nProps){ console.log(this.props.count); // logs 0 console.log(nProps.count); // logs 1 } } SomeComponent.defaultProps = {count: 0};

now lets say we add 5 to count.

componentWillReceiveProps(nProps){ console.log(this.props.count); // logs 1 console.log(nProps.count); // logs 6 }

basically it executes before you actually render with the new props. this.props.count is the current value in the component. and nextProps.count (nProps.count) is the next value that is coming in. Hope that helps explain how it works! :)

@matthewalexander if my answer solved your issue I would greatly appreciate it if you could mark the answer as accepted so that other passers by know it is the correct answer and also so this question can be considered closed.
Hi John - I will do that for sure, once I verify it works. I've been tied up with other things for last 19HRS ;)
Thank you! Let me know if you are still unclear on it and I can try and explain more if needed :)

Collectives™ on Stack Overflow

React.js,Event Listener onChange for Specific Prop?

1 Answer 1

EDIT:

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT:

8 Comments

Related