score:3
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.
score:2
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);
Source: stackoverflow.com
Related Query
- How could i change my state from getCellActions
- Reactjs how to change the state of a component from a different component
- how and when to call a react component methods after state change from redux
- How to Change Parent State from Child - Mobx State Tree?
- How to wait for a Redux action to change state from a React component
- How to change child state from another child without re-rendering parent
- How can I change a child's state from the parent component
- React How to change state value from child to Parent using useState and useContext
- how to receive message from BackgroundJS and change state in ReactJS and Chrome extension?
- next.js how to change parent state from child component without triggering a button?
- How to handle the state of multiple inputs and change their state from the parent?
- How to change state in one page from a link click from another page?
- How do you change state of a react component from a different component?
- How can I change the state of a parent component from a child component?
- How to change parent state from child component?
- How to change the state of one class from a function in a different class
- How init change redux state from componentDidMount?
- How do I change a parent's state from a child's state on React?
- How do I change the state of the parent component from the child component in Reactjs?
- How to change parent component's state from child component?
- How do I tell React component to change its state when an event is triggered from third party lib?
- how to prevent child component from reload when the parent state is change
- How to prevent protected route from automatically redirecting on redux state change
- How to change only a part of the state from child component react hooks
- How to change Redux state from a path string?
- How to change state of component from anywhere without Redux?
- How to trigger state change from child to parent in React Hooks?
- react: How to change the state of a child component(function component, not class component) from its parent?
- How to change any function Component's state from another function?
- How would I change the state in the parent component from the child in React?
More Query from same tag
- How To Capture OnChange Event Using CKEditor with React JS
- Ant Design Tabs remain unchanged when clicking to browser back button. How to change tabs when state updates
- React - Cannot set property of undefined
- Can access paths externally using react router on top of a asp.net project
- Cant apply column on row with flexbox
- change nested component's style based on parent props in styled-components?
- Use anchors with react-router
- i am trying to upload file in react to firebase and setfileUrl.somehow its giving asyn promise error
- How to test a react component that is dependent on useContext hook?
- How to reset state of Redux Store when using configureStore from @reduxjs/toolkit?
- How to implement material-ui Snackbar as a global function?
- Webpack, React.js - require not defined error in browser console
- Node-fetch not working with Electron 11, error resp.body.pipe is not a function
- How to set a basename for react-router Router
- Action creators handling axios get.request with state access for param
- React js Delay rendering causes error
- Align react-table last column to the right
- How to pass state property to child component in constructor with React.js?
- React hooks useState/setState not working after sorting the array and passing it
- Is there any other way to use react-multi-carousel with NEXT.js and React/Typescript
- How to implement error boundary in react with server side rendering in nextjs?
- Error while splitting Reducer
- Ternary operator ? in Javascript is resolving backwards from expected
- Jest: mocking console.error - tests fails
- How to notify the front end that it needs to refresh after setting a custom claim with Firebase cloud functions onCreate listener
- React startup ES2016
- Using Filter property of PrimeReact DataTable
- ReactJS, passing data between siblings
- Typescript equivalent of PropTypes.oneOf, from existing variable
- Setstate not updating in CustomInput type='checkbox' handler