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'));



Related Query

More Query from same tag