score:0
i have looked at your code and i am not sure why function takes previous state but i have found work around for this. if you like you can take a look at it.
i have create localactivetype
and it will store same default value as activetype
state and changed function to update value of it.
let localagetype = { value: 'everyone' }
// modify to use usestate
const externalfilterchanged = (newvalue) => {
setagetype({ value: newvalue });
localagetype= { value: newvalue }
};
now in doesexternalfilterpass
, i replace localagetype
with agetype
and it worked.
here is whole code
'use strict';
import react, { usestate, useeffect } from 'react';
import { render } from 'react-dom';
import { aggridreact, aggridcolumn } from 'ag-grid-react';
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
let localagetype = { value: 'everyone' }
const gridexample = () => {
const [gridapi, setgridapi] = usestate(null);
const [gridcolumnapi, setgridcolumnapi] = usestate(null);
const [rowdata, setrowdata] = usestate(null);
// add usestate
const [agetype, setagetype] = usestate({ value: 'everyone' });
const ongridready = (params) => {
setgridapi(params.api);
setgridcolumnapi(params.columnapi);
const updatedata = (data) => {
document.queryselector('#everyone').checked = true;
setrowdata(data);
};
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((resp) => resp.json())
.then((data) => updatedata(data));
};
// modify to use usestate
const externalfilterchanged = (newvalue) => {
setagetype({ value: newvalue });
localagetype= { value: newvalue }
};
const isexternalfilterpresent = () => {
return true;
};
// modify to use usestate
const doesexternalfilterpass = (node) => {
switch (localagetype.value) {
case 'below25':
return node.data.age < 25;
case 'between25and50':
return node.data.age >= 25 && node.data.age <= 50;
case 'above50':
return node.data.age > 50;
case 'dateafter2008':
return asdate(node.data.date) > new date(2008, 1, 1);
default:
return true;
}
};
// add useeffect to call onfilterchanged when filter updated
useeffect(() => {
gridapi && gridapi.onfilterchanged();
}, [agetype]);
return (
<div style={{ width: '100%', height: '100%' }}>
<div classname="test-container">
<div classname="test-header">
<label>
<input
type="radio"
name="filter"
id="everyone"
onchange={() => externalfilterchanged('everyone')}
/>
everyone
</label>
<label>
<input
type="radio"
name="filter"
id="below25"
onchange={() => externalfilterchanged('below25')}
/>
below 25
</label>
<label>
<input
type="radio"
name="filter"
id="between25and50"
onchange={() => externalfilterchanged('between25and50')}
/>
between 25 and 50
</label>
<label>
<input
type="radio"
name="filter"
id="above50"
onchange={() => externalfilterchanged('above50')}
/>
above 50
</label>
<label>
<input
type="radio"
name="filter"
id="dateafter2008"
onchange={() => externalfilterchanged('dateafter2008')}
/>
after 01/01/2008
</label>
</div>
<div
id="mygrid"
style={{
height: '100%',
width: '100%',
}}
classname="ag-theme-alpine"
>
<aggridreact
defaultcoldef={{
flex: 1,
minwidth: 120,
filter: true,
}}
animaterows={true}
isexternalfilterpresent={isexternalfilterpresent}
doesexternalfilterpass={doesexternalfilterpass}
ongridready={ongridready}
rowdata={rowdata}
>
<aggridcolumn field="athlete" minwidth={180} />
<aggridcolumn
field="age"
filter="agnumbercolumnfilter"
maxwidth={80}
/>
<aggridcolumn field="country" />
<aggridcolumn field="year" maxwidth={90} />
<aggridcolumn
field="date"
filter="agdatecolumnfilter"
filterparams={datefilterparams}
/>
<aggridcolumn field="gold" filter="agnumbercolumnfilter" />
<aggridcolumn field="silver" filter="agnumbercolumnfilter" />
<aggridcolumn field="bronze" filter="agnumbercolumnfilter" />
</aggridreact>
</div>
</div>
</div>
);
};
var datefilterparams = {
comparator: function (filterlocaldateatmidnight, cellvalue) {
var celldate = asdate(cellvalue);
if (filterlocaldateatmidnight.gettime() === celldate.gettime()) {
return 0;
}
if (celldate < filterlocaldateatmidnight) {
return -1;
}
if (celldate > filterlocaldateatmidnight) {
return 1;
}
},
};
function asdate(dateasstring) {
var splitfields = dateasstring.split('/');
return new date(splitfields[2], splitfields[1], splitfields[0]);
}
render(<gridexample></gridexample>, document.queryselector('#root'));
Source: stackoverflow.com
Related Query
- using useState and External Filters in reactJS
- reactjs Avoid Infinite loop using the useState and useEffect
- I am using reactJs useState and useContext but the useState value dosen't seem to be updating
- typesafe select onChange event using reactjs and typescript
- Import JavaScript file and call functions using webpack, ES6, ReactJS
- Advantages and Disadvantages of using ReactJS
- Using React Router and Webpack 2 how to require external libraries only on certain routes?
- How to display 404 when URL doesn't match any route and when the URL contains /#/ using ReactJS
- How to do POST in FORM Submit using reactjs and pass the object value into REST service?
- How to read and upload a file in reactjs using custom button
- Using an input field with onBlur and a value from state blocks input in Reactjs JSX?
- Canvas element does not resize when using ReactJS and PaperJS together
- How to move css-in-js (Styled Components) to an external css files during build using webpack - ReactJS
- using Material-ui checkboxes with the reactjs and redux
- How to upload image using ReactJS and save into local storage?
- ReactJs Modal Using Javascript and CSS
- ReactJS good practices using Hooks and Redux. Should I use useSelector in each component, or I should pass via props?
- How to fix "Failed to load resource: net::ERR_FILE_NOT_FOUND" for static images on cordova app using Reactjs and create-react-app
- Authenticate Users and use Graph API using Azure AD, ReactJS and NodeJS
- Authentication using ReactJS and Firebase
- Trouble with drag-and-drop sortable list using ReactJs and react-dnd
- Debugging ReactJs in Chrome on page load - this and everything else is undefined when using console
- States in ReactJs using ES6 and ES7
- Strike through any item in a list created using material ui and Reactjs
- Using external styles and multiple class names with webpack css loader
- How to get CSV data using Reactjs and store into state?
- How to display an image in full screen background using reactJS and css?
- Change page background color with each route using ReactJS and React Router?
- How to disable watch and share button on youtube videos using CSS/ Reactjs
- Simple Reactjs app without using npm and server?
More Query from same tag
- Redux-Saga call effect always ends on catch block
- React - Execute a callback function in Parent component
- Using React states with delay
- How to fix ReactJS filtered search that isn't working properly
- React form validation - callbacks not events
- react parsing error: unexpected error '#' while using the react router sitemap npm
- A React component's function is not recognized as a function when passed in as a parameter
- What is the best way to create component library for both React and Preact?
- Dockerized React app on Node - How to copy files?
- React.createRef() not works
- Showing modal via method call in react app
- How can i use custom hooks inside my function?
- React hooks: new state value not reflecting in setInterval callback
- Import default react component with two or more different name
- div Items disappears after hovering
- Binding a variable in react to a function changes it to an object
- React Native Elements Line underneath FormInput Component
- How to access react-redux store outside of component
- Loop through every field of object in react js
- How to parse input xml data to json in react with xml2js?
- How to pass form data to MongoDB in React?
- react render don't show anything
- React js Background Image
- Problem with ESLint, React/TS when trying to use export * syntax
- React Slick Custom Carousel with image overlap a div
- mui v5: how to overwrite ArrowDownwardIcon in MuiTableCell
- dynamic setState and get state using es6 in react
- Dynamic reference to a google font from react app
- Scoping issues with Context Provider using TypeScript
- The context `router` is marked as required in `Link`, but its value is `undefined`