Set rows to datagrid React

Question

I have component where I get data from back end and try to set to DataGrid

Here is it's code

     export const CompaniesHouseContainer: React.FC<Props> = () => {
      const classes = useStyles();
      const companyHouseDataAccess = useCompaniesHouseDataAccess();
      const [loadingCH, setLoadingCH] = useState(false);
      const [companiesHouseResults, setComponentHouseResults] = useState<CompaniesHouseTestDto[]>();
      const companyName = useRef<any>();
      const postalCode = useRef<any>();
      let rows: any[] = [];
      const columns = [
        { field: 'companyName', headerName: 'Company Name', width: 70 },
        { field: 'addressLine1', headerName: 'Address Line 1', width: 130 },
        { field: 'addressLine2', headerName: 'Address Line 1', width: 130 },
        {
          field: 'city',
          headerName: 'City',
          width: 90,
        },
        {
          field: 'postalCode',
          headerName: 'Postal Code',
          width: 160,
        },
      ];
    
      const handleSubmitForm = async (e: any) => {
        e.preventDefault();
        setLoadingCH(true);
        const data = await companyHouseDataAccess.getCompaniesHouseResult(companyName.current.value, postalCode.current.value);
    
        console.log(rows);
        setComponentHouseResults(data);
        setLoadingCH(false);
        rows = data;
        console.log('Here is rows');
        console.log(rows);
      };
    
      return (
        <div className="flex-grow flex flex-col min-h-0">
          <div className="flex-grow flex flex-col min-h-0">
            <div className="pr-0 mt-80" style={{ display: 'flex', justifyContent: 'center' }}>
              <MuiCardWithAnimation component={AnimateSimple} recipe="slideRightInLarge" style={{ width: '70%' }} square>
                <CardContent className="flex flex-col items-center justify-center p-32 md:p-48 md:pt-128 ">
                  <Typography variant="h6" className="md:w-full mb-32">
                    Search Company
                  </Typography>
    
                  <form name="recoverForm" onSubmit={handleSubmitForm} noValidate className="flex flex-col justify-center w-full">
                    <TextField
                      variant="outlined"
                      label="Company Name"
                      className="mb-16"
                      type="text"
                      name="companyName"
                      inputRef={companyName}
                      style={{ marginTop: '50px' }}
                      required
                    />
    
                    <TextField
                      variant="outlined"
                      label="Postal Code"
                      className="mb-16"
                      type="text"
                      name="postalCode"
                      style={{ marginTop: '50px' }}
                      inputRef={postalCode}
                      required
                    />
    
                    <Button
                      variant="contained"
                      color="primary"
                      className="w-224 mx-auto mt-16"
                      aria-label="Reset"
                      style={{ marginTop: '30px' }}
                      type="submit"
                    >
                      SUBMIT
                    </Button>
                  </form>
                </CardContent>
              </MuiCardWithAnimation>
            </div>
          </div>
    
          <div className="flex-grow flex flex-col min-h-0">
            <div className="pr-0 mt-20" style={{ display: 'flex', justifyContent: 'center', overflowY: 'scroll' }}>
              <div style={{ height: 400, width: '100%' }}>
                <DataGridPro rows={rows} columns={columns} pageSize={5} rowsPerPageOptions={[5]} checkboxSelection />
              </div>
            </div>
          </div>
        </div>
);
};

Here I try to populate rows with data coming from BE rows = data;

Here is data that coming from BE

[
{
    "companyName": "N LEDNER CARPENTRY & JOINERY LTD",
    "companyNumber": "10603985",
    "companyStatus": "active",
    "companyType": "ltd",
    "kind": "searchresults#company",
    "companyProfileLink": "https://find-and-update.company-information.service.gov.uk//company/10603985",
    "addressLine1": "38 Derby Drive",
    "addressLine2": "Leybourne",
    "country": "United Kingdom",
    "locality": "West Malling",
    "postalCode": "ME19 5FJ",
    "region": "Kent",
    "sicCodes": null,
    "matchConfidenceBand": "UNMATCHED",
    "matchConfidenceScore": 6,
    "matchConfidenceStrategyName": "FuzzyCompanyNameStrategy"
},
{
    "companyName": "N LEDNER CARPENTRY & JOINERY LTD",
    "companyNumber": "10603985",
    "companyStatus": "active",
    "companyType": "ltd",
    "kind": "searchresults#company",
    "companyProfileLink": "https://find-and-update.company-information.service.gov.uk//company/10603985",
    "addressLine1": "38 Derby Drive",
    "addressLine2": "Leybourne",
    "country": "United Kingdom",
    "locality": "West Malling",
    "postalCode": "ME19 5FJ",
    "region": "Kent",
    "sicCodes": null,
    "matchConfidenceBand": "UNMATCHED",
    "matchConfidenceScore": 4,
    "matchConfidenceStrategyName": "FuzzyNameStrictAddressStrategy"
},
{
    "companyName": "N LEDNER CARPENTRY & JOINERY LTD",
    "companyNumber": "10603985",
    "companyStatus": "active",
    "companyType": "ltd",
    "kind": "searchresults#company",
    "companyProfileLink": "https://find-and-update.company-information.service.gov.uk//company/10603985",
    "addressLine1": "38 Derby Drive",
    "addressLine2": "Leybourne",
    "country": "United Kingdom",
    "locality": "West Malling",
    "postalCode": "ME19 5FJ",
    "region": "Kent",
    "sicCodes": null,
    "matchConfidenceBand": "UNMATCHED",
    "matchConfidenceScore": 60,
    "matchConfidenceStrategyName": "OrderMatchingStrategy"
},
{
    "companyName": "LEDNERAL LTD",
    "companyNumber": "10471091",
    "companyStatus": "dissolved",
    "companyType": "ltd",
    "kind": "searchresults#company",
    "companyProfileLink": "https://find-and-update.company-information.service.gov.uk//company/10471091",
    "addressLine1": "Abergele Road",
    "addressLine2": null,
    "country": null,
    "locality": "Colwyn Bay",
    "postalCode": "LL29 8BF",
    "region": "Conwy",
    "sicCodes": null,
    "matchConfidenceBand": "UNMATCHED",
    "matchConfidenceScore": 12,
    "matchConfidenceStrategyName": "FuzzyCompanyNameStrategy"
},
{
    "companyName": "LEDNERAL LTD",
    "companyNumber": "10471091",
    "companyStatus": "dissolved",
    "companyType": "ltd",
    "kind": "searchresults#company",
    "companyProfileLink": "https://find-and-update.company-information.service.gov.uk//company/10471091",
    "addressLine1": "Abergele Road",
    "addressLine2": null,
    "country": null,
    "locality": "Colwyn Bay",
    "postalCode": "LL29 8BF",
    "region": "Conwy",
    "sicCodes": null,
    "matchConfidenceBand": "UNMATCHED",
    "matchConfidenceScore": 9,
    "matchConfidenceStrategyName": "FuzzyNameStrictAddressStrategy"
},
{
    "companyName": "LEDNERAL LTD",
    "companyNumber": "10471091",
    "companyStatus": "dissolved",
    "companyType": "ltd",
    "kind": "searchresults#company",
    "companyProfileLink": "https://find-and-update.company-information.service.gov.uk//company/10471091",
    "addressLine1": "Abergele Road",
    "addressLine2": null,
    "country": null,
    "locality": "Colwyn Bay",
    "postalCode": "LL29 8BF",
    "region": "Conwy",
    "sicCodes": null,
    "matchConfidenceBand": "UNMATCHED",
    "matchConfidenceScore": 30,
    "matchConfidenceStrategyName": "OrderMatchingStrategy"
}

]

I see table rendered, but no rows

Where can be problem?

Answer 1

Updating a constant will not trigger any rerender of your component. So you need to store the rows in a local state:

Instead of :

  let rows: any[] = [];

You should have:

const [rows,setRows] = useState<any[]>([])