CODEWITHSUNDEEP
ag-gridag-grid-react
Nicolas S.
Nicolas S.

Reputation: 173

Accessing state with Ag-grid

Probably not a Ag-Grid problem but I'm stuck on this one for some time.

Having a component in react like this :

export default class Recrutement extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        candidats: [], // We suppose here that values are filled
        values: [] // We suppose here that values are filled
      };
      this.getContacts();
      this.getValues();
    }


    columnDefs = [{
        cellRenderer: function(params) {
          return '<span><i class="material-icons">&#xE5D3;</i></span>';
        },
        suppressMovable: true,
        width: 100,
        colId: 1,
        //width: (self.columnDefinitions.find(function (v) { return v.colId === 1 }) || {}).size || 50,
        pinned: 'left',
        suppressFilter: true
      },
      {
        width: 100,
        headerName: "Formation",
        editable: true,
        colId: 7,
        suppressMovable: true,
        //width : (self.columnDefinitions.find(function (v) { return v.colId === 7 }) || {}).size || null,
        autoHeight: true,
        cellEditor: 'agSelectCellEditor',
        valueGetter: function(params) {
          if (params.data.candidat.formationId === null)
            return "";
          return this.state.values.formations.find(function(val) {
            return val.id === params.data.candidat.formationId;
          }).name;
        },
        valueSetter: function(params) {
          return selectValueSetter(this.state.values.formations, true, 'formationId', params);
        },
        cellEditorParams: function() {
          return {
            values: this.state.values.formations
              .sort(function(a, b) {
                if (a.name < b.name) return -1;
                if (a.name > b.name) return 1;
                return 0;
              })
              .map(function(v) {
                return v.name;
              })
          };
        },
        filter: "anyOfWordsFilter"
      },
    ];
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

What I want is that valueGetter for example have access to this.state. However here, I just get everytime :

Uncaught TypeError: Cannot read property 'state' of undefined

I tried the bind system (or maybe I did it wrong, probably :D), the arrow one however none of them are working.

How can I access the state in this condition ? To use Ag-grid, I need my array to stay like this (function can change)

Upvotes: 0

Views: 898

Answers (1)

un.spike
un.spike

Reputation: 5113

replace

    valueSetter: function(params) {
          return selectValueSetter(this.state.values.formations, true, 'formationId', params);
    },

by

    valueSetter: (params) => {
          return selectValueSetter(this.state.values.formations, true, 'formationId', params);
    },

and please ready this post and this one

Upvotes: 1

Related Questions