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

Question

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
                    }
                },

const show = this.Modal(); then call show()

Omar K
– Omar K

2018-03-06 01:39:15 +00:00
Commented Mar 6, 2018 at 1:39 — Omar K
– Omar K, Commented Mar 6, 2018 at 1:39
Where would I put that?

Matt Mateo
– Matt Mateo

2018-03-06 01:41:29 +00:00
Commented Mar 6, 2018 at 1:41 — Matt Mateo
– Matt Mateo, Commented Mar 6, 2018 at 1:41

Giang Le · Accepted Answer · 2018-03-06 01:43:52Z

1

You must change to arrow funcion

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

answered Mar 6, 2018 at 1:43

Giang Le

7,1294 gold badges29 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Matt Mateo Over a year ago

Ahh ok, care to explain this? The suggestion of @Omar also works by assigning it in a variable.

Giang Le Over a year ago

in arrow function you can direct call "this". instead of doing like var self = this and call self.showModal()

Matt Mateo Over a year ago

How come that its calling the component's this.showModal() function and not the this inside it?

Giang Le Over a year ago

You can readmore at exploringjs.com/es6/…

webnetweaver · Accepted Answer · 2018-03-06 01:48:02Z

0

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.

answered Mar 6, 2018 at 1:48

webnetweaver

3001 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related