react nested component pass builtin function (no flux)

Question

I'm trying to pass built in react function through props and trying to set state but I get this as undefined!

I've tried something like this:

index.js

let somefun = function(){
    this.setState({myvar:1});
}

ReactDom.render(<someComponent body={<someOtherComponent1 componentWillUpdate={somefun}/>} />, document.getElementById('someValidID'));

someOtherComponent1.js

React.createElement( someOtherComponent1, { "className": "someclass"} )

My Problem is whenever I pass a builtin function ie, functions present in react prototype this is always undefined.

How can I send built-in functions through props?

BradByte · Answer 1 · 2016-06-15T12:25:43.603

1

Very common problem with getting familiar with this and passing functions around.

tl;dr in order to call setState on this, this needs to be called inside the component whose state needs to be updated. You're calling it outside of the component.

someFun is a new function that calls a function of this inside it. The problem is that in that context, this is a reference to someFun and not your component instance. Go ahead and put a console.log(this) in there to see.

I think in your scenario onComponentWillUpdate should be a function inside of your component, not declared outside of it.

render: function() {
  return (
    <someOtherComponent1 onComponentWillUpdate={function(nextProps, nextState) {
       // do something here
      }}
    />
  )

But, don't forget you have to actually call that function in your child component.

// in someOtherComponent1
componentWillUpdate: function(nextProps, nextState) {
  // do something
  this.props.onComponentWillUpdate(nextProps, nextState)
}

edited Jun 15 '16 at 12:25

answered Jun 10 '16 at 11:02

BradByte

11,015
2
37
41

thanks for the answer...but I'm trying to work out some abstraction here.. I don't want to set the sumeFunc inside the component...the reason is,, this component is a reusable component and the only thing that isdynamic to this component is `componentWillUpdate` func so, I was looking for a way to specify it from outside the component (pass it down from the parent component or something similar) habe you got any ideas on how to do this? – Nishanth Matha Jun 13 '16 at 15:22
It would work like this. As long as your component always calls the function passed down (you could even name it onComponentWillMount to make it more understandable), it will work. What you're wanting is the older React's mixins methodology, but those are supported anymore. Keep in mind you can define the onComponentWillMount on the fly. See the updated answer. – BradByte Jun 15 '16 at 12:21

score 0 · Answer 2 · answered Jun 10 '16 at 11:02

0

ReactDom.render(<someComponent body={<someOtherComponent1 yourFn={somefun}/>} />, document.getElementById('someValidID'));

and inside component

this.props.yourFn()

answered Jun 10 '16 at 11:02

siwymilek

815
1
6
24

This won't work because the issue is that `someFun` doesn't have the right pointer to `this`, so renaming and calling it in the child component will do the same thing. It needs to be defined inside the instance of the component, so that `this` points to the component. As it stands now, it's being declared outside of the component. – BradByte Jun 10 '16 at 11:05

react nested component pass builtin function (no flux)

2 Answers2