CODEWITHSUNDEEP
javascriptreactjs
Matt Mateo
Matt Mateo

Reputation: 168

How to call function in ReactJS in a callback within the same component?

I have a function within the component and at the same time I am using DataTables button to trigger display a modal. Here's the snippet:

constructor(props) {
      super(props);
      this.state = {
          error: null,
          isLoaded: false,
          table_type: 'default',
          date_time : null,
          data: [],
          header : null
      };
      this.toogleBtnTbl = this.props.toogleBtnTbl.bind(this);
      this.showModal = this.props.showModal.bind(this);
    }

I cant call the function this.showModal inside the button of Datatables because this refers to the Datatables in this case. My question is how to call this.showModal inside the action property?

buttons: [
                {
                    text: 'View in Graph',
                    action: function ( e, dt, node, config ) {  
                        this.showModal();//not working undefined
                    }
                },

Upvotes: 1

Views: 3048

Answers (2)

webnetweaver
webnetweaver

Reputation: 300

Never used DataTables but I think you just need an anonymous immediately executed function to capture "this" and store it in a closure:

buttons: [
            {
                text: 'View in Graph',
                action: (function(component){
                    return function ( e, dt, node, config ) {  
                        component.showModal();
                    };
                })(this);
            },

action is being set to a function which is immediately called storing 'this' inside it's own little lexical environment where the returned function will always have access to it. Let me know if this works.

Upvotes: 0

Giang Le
Giang Le

Reputation: 7089

You must change to arrow funcion 

action: ( e, dt, node, config ) => {  
   this.showModal();
}

Upvotes: 1

Related Questions