React ES5: Pass a function to another function resulted in “not a function” error

Question

I am trying to passed a function from one component(CompB) to another function that is in the another component(CompA) so it will be executed when setState is completed.

However, I ran into Uncaught TypeError: CallBack is not a function error.

The code snippet is following:

var CompA = React.createClass({

  foo: function(form, CallBack){
    var that = this;
    $.ajax({
      url: '/someurl',
      type: 'someAction',
      data: $(form).serialize(),
      success: function(data) {
        that.setState({"id": data.id}, function(){
          CallBack();
        });
      },
      error: function(data) {
        console.log("Error")
      }
    });
  },

  InnerCallBack: function(SuccessCallBack){
    this.foo($("#some_form"), SuccessCallBack); 
  },


  render:function(){
    return(
      <CompB passedCallBack = {this.InnerCallBack} />
      <button onClick={this.submit}>Submit</button>
    )
  }
})

var CompB = React.createClass({
  addWords: function(){
    var bar = this.state.words;

    bar.push({
       "someData": "",
       "words": "dafadf"
    });

    this.setState({
      "words" : bar
    })
  },

  callbackWrapper: function(event) {
    event.preventDefault();
    this.props.passedCallBack(this.addWords());
  },

  render: function(){
    return(
      <button onClick={this.callbackWrapper}>
    )
  }
})

My guess and attempts : 1:The research I have done on SO suggested a binding problem. However, that post was about ES6. my version is ES5,which has the auto-binding as far as i know?

2: Right now I am suspecting it has to do with scoping? I am suspecting this line <CompB passedCallBack = {this.InnerCallBack} /> because no parameter is passed? but I thought in react passing a function as props does not require a parameter?

What I tried to achieve 1: I am trying to find out what caused this error and a way to fix it.

2: Another problem I have with this code snippet is that when the button from CompB is clicked, the onClick function from CompA is fired as well. I understood that it has something to do with DOM's event bubbling and tried to use evemt.preventDefault() to fix it, but it did not fix it.(This can be a seperate SO post,so I am not worrying about it at this point)

Answer 1

Pass a function to another function resulted in “not a function” error

You are not passing a function.

• foo is called as this.foo($("#some_form"), SuccessCallBack); in InnerCallBack .
• InnerCallBack is called as this.props.passedCallBack(this.addWords());

Ie you are calling addWords and pass its return value to passedCallBack . passedCallBack expects to be passed a function, but addWords does not return anything (hence it returns undefined ). Therefore SuccessCallBack will be undefined .

If you intend to pass addWords as callback then don't call it:

this.props.passedCallBack(this.addWords);
//                                    ^^ no calling parenthesis here