How could i change my state from getCellActions

Question

I am new in react. For my project i want to change my state by clicking an icon from table which will change my state. I am using getCellActions (react-data-grid). How could I pass my custom function alone with column and row object.

Thanks in advance.

NT: I am not using redux

getCellActions(column, row, state) {

        if(column.key === 'modify'){
            return [
                {
                    icon: 'fa fa-edit',
                    callback: () => {
                        console.log(row.id);
                       //this.getRoleData();
                    }
                }
            ];

        }
    }

score 3 · Accepted Answer · answered Aug 27 '18 at 19:38

You can simply use ES6 and pass an arrow function expression that simply invokes the function you want and binds the function with this automatically..

In react-data-grid, you would have to do something like below:

<ReactDataGrid
    columns={this._columns}
    rowGetter={this.rowGetter}
    rowsCount={this._rows.length}
    minHeight={300}
    getCellActions= {(column, row) => this.getCellActions(column, row)}
    state = {this.state}
/>

And your getCellActions function can be as it is:

getCellActions(column, row) {

    if(column.key === 'modify'){
        return [
            {
                icon: 'fa fa-edit',
                callback: () => this.getRoleData(row.id)
            }
        ];

    }
}

The thing is that when you write:

getCellActions= {(column,row) => this.getCellActions(column, row)}

you actually pass an anonymous function which will only be executed when triggered. I would like to add that when you write an arrow function in one line, it automatically returns that statement, except you wrap that line in curly braces and write a normal function. So, the above line works as :

getCellActions= {(column,row) => return this.getCellActions(column, row)}

So, the MANTRA is: return the reference, do not execute it before the trigger.

That makes the sense. With bind that callback function called twice and it worked. Thanks mate. — ANIK ISLAM SHOJIB, Aug 28 '18 at 07:13

Laurenz Glück · Answer 2 · 2018-08-27T15:03:10.500

The problem why this.getRoleData() is not working, is because this inside of your callback is not in the context of your component.

Change your getCellActions function to an arrow function, so you have the component as context (inside a arrow function this keeps its meaning from its original context):

import React from 'react';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedRowId: null
        };
    }

    myCallback = (rowId) => {
        console.log(rowId);
        this.setState({ selectedRowId: rowId });
    };

    getCellActions = (column, row, state) => {

        if(column.key === 'modify'){
            return [
                {
                    icon: 'fa fa-edit',
                    callback: () => {
                        console.log(row.id);
                        this.myCallback(row.id);
                    }
                }
            ];

        }
    }

    render() {
        // your render function...
    }
}

Alternative:

Bind this to getCellActions in the constructor like:

this.getCellActions = this.getCellActions.bind(this);

callback is already an arrow function. But binding 'this' solved it thanks a lot mate. — ANIK ISLAM SHOJIB, Aug 27 '18 at 15:08
@anikislamShojib Yes, you are right, `callback` is an arrow function, but `getCellActions` is not - so the context of the `callback` is the `getCellActions` function and not your component with your state. Thats why binding `this` to `getCellActions` solved you problem (which is the same as changing it to an arrow function) — Laurenz Glück, Aug 27 '18 at 18:34

How could i change my state from getCellActions

2 Answers2