score:1
what is dispatch
in your actionsformatter
? it is defined neither on actionsformatter
scope nor on out of actionsformatter
scope. that's the problem and that's the javascript interpreter talking you about.
one of the possible fix is to import you redux store
store.js
export const store = createstore(...)
environmentlist.js
import { store } from './path/to/store.js'
// ...
const actionsformatter = (cell, row) => {
const { dispatch } = store
const id = row.id
// ...
};
this way you'll get dispatch
available in actionsformatter
body.
another way is to provide mapped method via connect -> environmentlist -> actionsformatter chain. do what arnaud christ suggested in his reply and then refactor the code:
const environmentlist = (props) => (
<bootstraptable
keyfield='id'
data={ props.store.environnements }
columns={ columns(props.removeenvironment) }
selectrow={selectrow}
pagination={ paginationfactory() }
filter={ filterfactory() }
striped hover condensed
/>
);
const actionsformatter = (removeenvironment) => (cell, row) => {
const id=row.id
return (
<button classname="btn btn-danger"
onclick={() => {
removeenvironment({ id });
}}
>delete</button>
);
};
const columns = (removeenvironment) => [{
datafield: 'id',
text: 'id'
}, {
datafield: 'nom',
text: 'nom',
filter: textfilter()
}, {
datafield: 'actions',
text: 'action',
formatter: actionsformatter(removeenvironment)
} ];
so, the connected environmentlist got necessary removeenvironment method on it's props. then we passes it to columns creator, which passed it to actionsformatter creator.
score:1
you have to link your component with the dispatch
method.
as you are already using react-redux
to connect your component to your redux store, you can easily do that through mapping dispatch
to props
.
just add the following:
const mapstatetoprops = (state) => {
return {
store: state
};
}
const mapdispatchtoprops = dispatch => {
return {
removeenvironnement: id => {
dispatch(removeenvironnement({ id }));
}
}
}
export default connect(mapstatetoprops, mapdispatchtoprops)(environnementlist);
and then in your onclick handler, just call this.props.removeenvironnement(id)
Source: stackoverflow.com
Related Query
- React dispatch is not defined remove action
- dispatch is not defined inside async action creators
- React Redux action not entering into dispatch
- dispatch is not defined on my functions using react and redux
- React JS Dispatch Not Defined
- 'x' is not defined - React map dispatch to Props
- react redux toolkit- action in dispatch returns err: Object(...) is not a function at onClick
- Dispatch values to redux action are not updated in order react app
- React - Redux - Dispatch Action Error, this.props.mostrarProduto is not a function
- Why this dispatch action is not working in the react component?
- Uncaught ReferenceError: React is not defined
- Window is not defined in Next.js React app
- React Uncaught ReferenceError: process is not defined
- window not defined error when using extract-text-webpack-plugin React
- Jquery in React is not defined
- Using jest in my react app, describe is not defined
- error 'document' is not defined : eslint / React
- React JS Error: is not defined react/jsx-no-undef
- google is not defined in react app using create-react-app
- Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
- React hooks: dispatch action from useEffect
- 'useState' is not defined no-undef React
- Uncaught ReferenceError: React is not defined
- React Native - __DEV__ is not defined
- React Redux dispatch action after another action
- Uncaught ReferenceError: regeneratorRuntime is not defined in React
- React Props is Not Defined
- gapi is not defined when loading React Component
- ReferenceError: React is not defined in jest tests
- React JS Uncaught Reference Error: function not defined
More Query from same tag
- How does react redux promise middleware send the resulting action to the dispatch?
- Webpack not generating bundle when used with Webpack Dev Server
- JavaScript React Front-End: Opening one collapse button, all collapse buttons open instead of just the one
- Map two arrays and compare in Javascript(React)
- How to fix to avoid ESLint Effect callbacks warning in React
- Conditional rendering in react for a multi language app in react
- Fill input with buttons values in ReactJs
- how to define type when the component is a union type
- How to move class functions outside of class and still use the this keyword in React?
- How to change the default browser opened for localhost?
- MongoDB Put/ Update :: TypeError: {(intermediate value)} is not a function
- How can I make my input field prefilled with data and editable on page load?
- URL adress and pagination. React.Js, Material-UI
- Add data to existing node in Firebase
- Where to send JWT Tokens?
- css image max-height has no effect unless I change the max-width
- How to implement plugin-based architecture using redux
- React - Adding an item to a list from an input by clicking submit button
- Lazy load a module using React lazy?
- How to bind methods
- Dynamic tabs for the below code - React js
- This scope in a simple React component
- Webpack: ReferenceError: document is not defined
- React & Typescript passing HTML types into custom hook
- How to open the dropdown list in Autocomplete Material-UI by default?
- How to pass data from different functional component?
- Styleguidist with Ant Design: components do not look like supposed
- React PropTypes: range of numbers
- Warning: React has detected a change in the order of Hooks called by Table
- How to load response data using axios in react?