title: Is There any way to update table with data received from backend
body: <p>I'm using material-ui to list group of violations to the user to select one or multiple violations, then during the selection i extract from each violation it's <code>id</code> and <code>update the state</code> so as a result <code>i'll have an array of ids to send it to backend</code></p>
  
  <p>here is my code</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import classnames from 'classnames';
  import get from 'lodash/get';
  // Material-UI
  import MaterialTable, { MTableToolbar } from 'material-table';
  import { withStyles } from '@material-ui/core/styles';
  import Grid from '@material-ui/core/Grid';
  import Paper from '@material-ui/core/Paper';
  import Button from '@material-ui/core/Button';
  import SaveIcon from '@material-ui/icons/Save';
  import CancelIcon from '@material-ui/icons/Cancel';
  // Forms
  import Entity from '~/Components/Entity';
  import { BaseFormComponent, Form, FormContainer, FormItem } from '~/Components/FormComponent';
  import { LabelAndValue, LookupString } from '~/Components/FormComponent/Controls';
  import { 
    isRequired,
    minNumbers,
    maxNumbers,
    onlyNumbers,
    noEnglish
  } from '~/Services/Validators';
  import Navigate from '~/Services/Navigate';
  import Notifications from '~/Services/Notifications';
  import Message from '~/Components/Message';
  import Strings from '~/Services/Strings';
  
  import styles from './styles';
  
  @withStyles(styles)
  class violationEditorScreen extends BaseFormComponent {
    constructor(props) {
      super(props);
  
      this.initState({
        error: false,
        errorMsg: '',
        requestId: null,
        complaintId: null,
        penalityTypeId: null,
        violations: [],
        inistitutionsData: [],
        selectedViolationsId: [],
  
        form: {
          id: {
            type: this.types.number,
            value: 0,
          },
          districtId: {
            type: this.types.number,
            value: 1,
            UIOnly: true
          },
          cityId: {
            type: this.types.number,
            value: 1,
            UIOnly: true
          },
          institutionTypeId: {
            type: this.types.number,
            value: 2,
            UIOnly: true
          },
          complaintTitle: {
            type: this.types.string,
            validators: [ isRequired(), noEnglish() ],
          },
          complaintDescription: {
            type: this.types.string,
            validators: [ isRequired(), noEnglish() ],
          },
          institutionId: {
            type: this.types.number,
            validators: [ isRequired() ],
          },
        }
      });
    }
  
    componentDidMount() {
      super.componentDidMount();
  
      // const id = get(this, 'props.match.params.id', null);
  
      // if (id) {   
      //   this.addFormFields({
      //   });
      // }
  
      this.getInstitutionsList();
    }
  
    getInstitutionsList() {
      const { form } = this.state;
  
      this.getInstitutionsEntity.get({
        cityId: form.cityId.value,
        districtId: form.districtId.value,
        institutionTypeId: form.institutionTypeId.value
      });
    }
  
    // On Institution Change
    onHandleInstitutionChange(institutionId) {
      this.getRequestIdEntity.post({ institutionId });
    }
  
    getRequestIdEntityPosted(data) {
      const requestId = data.requestId;
      const complaintId = data.id;
  
      this.setState({ 
        requestId,
        complaintId
      }, () =&gt; {
        this.getViolationsEntity.get({
          complaintId
        });
      });
    }
  
    onViolationsEntityReceived(data) {
      const violations = [];
  
      if(data &amp;&amp; data.length &gt; 0) {
        data.map(item =&gt; {
          violations.push({ ...item });
        });
  
        this.setState({ violations });
      }
      this.setState({ violations });
    }
  
    onInstitutionEntityReceived(data) {
      if(data &amp;&amp; data.licensingInstitutionsModel &amp;&amp; data.licensingInstitutionsModel.length &gt; 0) {
        const arr = [];
  
        data.licensingInstitutionsModel.map(item =&gt; {
          arr.push({
            id: item.institutionId,
            nameAr: item.fullName
          });
        });
        this.setState({ inistitutionsData: arr });
      }
    }
  
    onEntityPosted(data) {
      const requestId = data.requestId;
      Notifications.notify('success', Strings.complaintHasBeenSuccessfullyPublished);
      this.getViolationsEntity.post({ requestId });
    }
  
    onSubmit() {
      const id = get(this, 'props.match.params.id', null);
      const { selectedViolationsId, requestId } = this.state;
  
      if (this.isFormValid) {
  
        if(selectedViolationsId.length === 0) {
          this.setState({ 
            error: true,
            errorMsg: Strings.addAtLeastOneViolation
          });
        }else {
          const payload = {
            ...this.formValues,
            selectedViolationsId,
            requestId,
            id: id ? id : 0 
          };
  
          this.entity.post(payload);
        }  
      } else {
        this.showFormErrors();
      }
    }
  
    handleSelectedRows(rows) {
      const selectedViolationsId = [];
      const penalityTypeIds = [];
  
      if(rows.length &gt; 0) {
        rows.map(row =&gt; {
          selectedViolationsId.push(row.id);
          penalityTypeIds.push(row.penaltyTypeId);
        });
  
        this.setState({ selectedViolationsId }, () =&gt; {
          if(penalityTypeIds.length &gt; 0) {
            const validators= [ 
              isRequired(),
              minNumbers(1),
              onlyNumbers()
            ];    
            const penalityTypeId = penalityTypeIds.sort((a, b) =&gt; {
              if(a &gt; b) return -1;
              if(b &gt; a) return 1;
            })[0];
  
            if(penalityTypeId === 1 || penalityTypeId === 2) {
              validators.push(maxNumbers(30));
            } else {
              validators.push(maxNumbers(60));
            }
  
            this.addFormFields({
              settlementPeriodInDays: {
                type: this.types.number,
                validators
              },
            });
            this.setState({ penalityTypeId });
          } else {
            this.setState({ penalityTypeId: null });
          }
        });
  
      } else {
        this.setState({
          selectedViolationsId: [],
          penalityTypeId: null
        });
      }
  
    }
  
    get localization() {
      return {
        header: {
          actions: Strings.listActionsLabel,
        },
        body: {
          emptyDataSourceMessage: Strings.listEmptyLabel,
        },
        pagination: {
          labelRowsPerPage: Strings.rowsPerPageLabel,
          labelDisplayedRows: `{from}-{to} ${Strings.fromText} {count}`,
        },
        toolbar: {
          nRowsSelected: `${Strings.nSelected} {0} ${Strings.selectedViolations}`
        }
      };
    }
  
    get options() {
      return {
        actionsColumnIndex: -1,
        pageSize: 10,
        selection: true,
        filtering: true,
        columnsButton: true,
        maxBodyHeight: 600,
        pageSizeOptions: [ 5, 10 ] ,
        doubleHorizontalScroll: true,
        rowStyle: row =&gt; {
          if ( row.tableData.id % 2 ) {
            return { backgroundColor: '#f2f2f2' };
          }
        }
      };
    }
  
    get columns() {
      return [
        { title: Strings.violationReferenceNumber, field: 'referenceNumber', cellStyle: { width: 120 } },
        { title: Strings.violationDescription, field: 'description' },
      ];
    }
  
    get components() {
      const { classes } = this.props;
  
      return {
        Toolbar: props =&gt; (
          &lt;div className={classes.toolbar}&gt;
            &lt;MTableToolbar {...props} /&gt;
          &lt;/div&gt;
        ),
      };
    }
  
    render() {
      const { form, error, errorMsg, inistitutionsData, violations, penalityTypeId } = this.state;
      const { classes } = this.props;
      const {
        TextField,
        LookupSelectField,
        SelectAutocompleteField,
      } = this;
  
      return (
        &lt;React.Fragment&gt;
          &lt;Entity
            storeId={'Supervision-Complaints-Editor'}
            entityRef={ref =&gt; { this.entity = ref; }}
            onEntityReceived={data =&gt; this.onEntityReceived(data)}
            onEntityPosted={data =&gt; this.onEntityPosted(data)}
            onEntityPostedError={data =&gt; this.onEntityPostedError(data)}
            render={store =&gt; (
              &lt;React.Fragment&gt;
                &lt;If condition={error}&gt;
                  &lt;Grid item xs={12}&gt;
                    &lt;Message variant={'error'} text={errorMsg} /&gt;
                  &lt;/Grid&gt;
                &lt;/If&gt;
                &lt;Form loading={store.loading}&gt;
                  &lt;Grid container spacing={24}&gt;
                    &lt;Grid item xs={9}&gt;
                      &lt;Paper elevation={1} className={classes.box1}&gt;
                        &lt;fieldset className={classes.fieldSet}&gt;
                          &lt;legend&gt;{Strings.complaintDetails}&lt;/legend&gt; 
                          &lt;FormContainer&gt;
                            &lt;FormItem lg={4}&gt;
                              &lt;LookupSelectField 
                                name={'districtId'}
                                label={Strings.selectDistrictToSearch}
                                lookup={'Districts'}
                                onChange={() =&gt; this.getInstitutionsList()}
                                autocomplete
                              /&gt;
                            &lt;/FormItem&gt;
                            &lt;FormItem lg={4}&gt;
                              &lt;LookupSelectField 
                                name={'cityId'}
                                label={Strings.selectCityToSearch}
                                lookup={`City/LookupItemsByParentId/${form.districtId.value}`}
                                onChange={() =&gt; this.getInstitutionsList()}
                                autocomplete
                              /&gt;
                            &lt;/FormItem&gt;
  
                            &lt;FormItem lg={4}&gt;
                              &lt;LookupSelectField 
                                name={'institutionTypeId'}
                                label={Strings.selectInstitutionTypeToSearch}
                                lookup={'InstitutionTypes'}
                                onChange={() =&gt; this.getInstitutionsList()}
                              /&gt;
                            &lt;/FormItem&gt;
  
                            &lt;FormItem lg={4}&gt;
                              &lt;div className={classnames(classes.placeholder, {})}&gt;
                                &lt;SelectAutocompleteField
                                  name={'institutionId'}
                                  label={Strings.assignmentInstitutionName}
                                  emptyString={Strings.searchByNameAndLicense}
                                  data={inistitutionsData}
                                  onChange={field =&gt; this.onHandleInstitutionChange(field.value)}
                                /&gt;
                              &lt;/div&gt;
                            &lt;/FormItem&gt;
  
                            &lt;FormItem lg={4}&gt;
                              &lt;TextField 
                                name={'complaintTitle'}
                                label={Strings.complaintTitle}
                                setBorder={false}
                              /&gt;
                            &lt;/FormItem&gt;
  
                            &lt;If condition={penalityTypeId}&gt;
                              &lt;FormItem lg={4}&gt;
                                &lt;TextField 
                                  name={'settlementPeriodInDays'}
                                  label={Strings.insertSettlementPeriodInDays}
                                  setBorder={false}
                                /&gt;
                              &lt;/FormItem&gt;
                            &lt;/If&gt;
  
                            &lt;FormItem fullWidth&gt;
                              &lt;TextField
                                multiline
                                name={'complaintDescription'}
                                label={Strings.complaintDescription}
                              /&gt;
                            &lt;/FormItem&gt;
  
                          &lt;/FormContainer&gt;
                        &lt;/fieldset&gt;
                      &lt;/Paper&gt;
  
                      &lt;Paper elevation={1} className={classes.box}&gt;
                        &lt;fieldset className={classes.fieldSet}&gt;
                          &lt;legend&gt;{Strings.complaintAttachments}&lt;/legend&gt; 
                          &lt;FormContainer&gt;
  
                          &lt;/FormContainer&gt;
                        &lt;/fieldset&gt;
                        {/* Attachment Here */}
                      &lt;/Paper&gt;
  
                      &lt;If condition={violations.length &gt; 0}&gt;
                        &lt;Paper elevation={1} className={classes.box}&gt;
                          &lt;MaterialTable
                            title={Strings.complaintsAddViolationList}
                            data={violations}
                            options={this.options}
                            localization={this.localization}
                            columns={this.columns}
                            components={this.components}
                            onSelectionChange={rows =&gt; this.handleSelectedRows(rows)}
                          /&gt;
                        &lt;/Paper&gt;
                      &lt;/If&gt;
                    &lt;/Grid&gt;
                    &lt;Grid item xs={3}&gt;
                      {/* =========== Sidebar ============= */}                  
                      &lt;If condition={penalityTypeId}&gt;
                        &lt;Paper elevation={1} className={classes.box}&gt;
                          &lt;FormItem fullWidth style={{ marginBottom: 10 }}&gt;
                            &lt;LabelAndValue 
                              label={Strings.earnedPenality}
                              className={classes.deservedPenality}
                              value={(&lt;LookupString 
                                lookup={'PenaltyType'}
                                value={penalityTypeId}
                              /&gt;)}
                            /&gt;
                          &lt;/FormItem&gt;
                        &lt;/Paper&gt;
                      &lt;/If&gt;
  
                      &lt;Paper elevation={1} className={classes.box}&gt;
                        &lt;FormItem fullWidth style={{ marginBottom: 10 }}&gt;
                          &lt;Button
                            fullWidth
                            size={'large'}
                            color={'primary'}
                            variant={'contained'}
                            className={classes.submitButton}
                            onClick={() =&gt; this.onSubmit()}
                          &gt;
                            &lt;SaveIcon className={classes.rightIcon} /&gt; 
                            {Strings.saveText}
                          &lt;/Button&gt;
  
                          &lt;Button
                            fullWidth
                            size={'large'}
                            color={'secondary'}
                            variant={'contained'}
                            className={classes.cancelButton}
                            onClick={() =&gt; Navigate.goBack()}
                          &gt;
                            &lt;CancelIcon className={classes.rightIcon} /&gt; 
                            {Strings.cancelText}
                          &lt;/Button&gt;
                        &lt;/FormItem&gt;
                      &lt;/Paper&gt;
                    &lt;/Grid&gt;
                  &lt;/Grid&gt;
                &lt;/Form&gt;
              &lt;/React.Fragment&gt;
            )}
          /&gt;
          {/* Get Institutions */}
          &lt;Entity
            storeId={'Supervision-PlannedVisit-Schedule-List'}
            entityRef={ref =&gt; { this.getInstitutionsEntity = ref; }}
            onEntityReceived={data =&gt; this.onInstitutionEntityReceived(data)}
          /&gt;
          {/* Get Request Id */}
          &lt;Entity
            storeId={'Supervision-Complaints-GetRequestId'}
            entityRef={ref =&gt; { this.getRequestIdEntity = ref; }}
            onEntityPosted={data =&gt; this.getRequestIdEntityPosted(data)}
          /&gt;
          {/* Get Violation By Request Id --- And Initiate Request in Admin Screens */}
          &lt;Entity
            storeId={'Supervision-Complaints-Violations-By-ComplaintId'}
            entityRef={ref =&gt; { this.getViolationsEntity = ref; }}
            onEntityReceived={data =&gt; this.onViolationsEntityReceived(data)}
            onEntityPosted={data =&gt; Navigate.goBack()}
          /&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  violationEditorScreen.propTypes = {
    classes: PropTypes.object,
  };
  
  export default violationEditorScreen;
  
  </code></pre>
  
  <pre><code>componentDidMount() {
  if(id) {
  // grap the data from back end and upadte the table with checked rows that matches the ids that i got from Back-End
   }
  }
  </code></pre>
  
  <p>i expect <code>receive array of Ids</code> then <code>mark each row that it's id is in the array Of Ids</code> to let the user knows What he selected before.</p>
  
  <p>Thx in Advance.</p>