Q: React Js Error about const declarations require an initialization value I want to get the value of a Grid from Material UI Grid like in this code demonstration https://codesandbox.io/s/64331095cant-add-a-button-to-every-row-in-material-ui-table-vmnd9?file=/demo.tsx:233-795
now when I tried to copy the specific code to get the values of the Material UI Grid, it shows error in this line :
const api: GridApi = params.api;
const thisRow: Record<string, GridCellValue> = {};

Here is the code that I copied from the link and my full code:
import {useState, useRef} from 'react'
import { DataGrid, GridApi, GridCellValue } from '@material-ui/data-grid';

import IconButton from '@material-ui/core/IconButton';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import EditIcon from '@material-ui/icons/Edit';

import Button from '@material-ui/core/Button';

const RequestTable = (props) => {

    const {requestsData, handleAssigneeModal, handleNewRequestModal, refreshdata} = props;    

    const columns = [
      { 
        field: 'id',
        headerName: 'ID',
        hide: true        
      },     
      { 
        field: 'number',
        headerName: '#',
        editable: false,
        flex: 1,
        sortable: false,     
        renderCell: (params) => {
          const onClick = (e) => {
            e.stopPropagation(); // don't select this row after clicking
    
            const api:GridApi = params.api;
            const thisRow : Record<string, GridCellValue> = params{};
    
            api
              .getAllColumns()
              .filter((c) => c.field !== '__check__' && !!c)
              .forEach(
                (c) => (thisRow[c.field] = params.getValue(params.id, c.field)),
              );
    
            return alert(JSON.stringify(thisRow, null, 4));
          };
    
          return <Button onClick={onClick}>Click</Button>;
        },
   
      {
        field: 'requested_by',
        headerName: 'Requested by',
        flex: 3,
        editable: false,
      },
      {
        field: 'request_datetime',
        headerName: 'Request date',
        flex: 2,        
        editable: false,
      },
      {
        field: 'description',
        headerName: 'Description',        
        flex: 4,        
        editable: false,
      },
      {
        field: 'status',
        headerName: 'Status',                
        flex: 2,
        editable: false,
      },
      {
        field: 'assignee',
        headerName: 'Assignee',
        flex: 3,        
        editable: false,
        renderCell: (params) => {                                    
          return <><IconButton color="primary" component="span" onClick={handleAssigneeModal}>
          <AddCircleIcon/>
        </IconButton>{params.formattedValue}</>          
        },
      }
    ];

    const dateFormatter = (date) => {
      var months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
         "Jul", "Aug", "Sept", "Oct", "Nov", "Dec" ];
      const dd = (date.getDate() < 10 ? '0' : '') + date.getDate();
      const MM = ((date.getMonth() + 1) < 10 ? '0' : '') + (date.getMonth() + 1);
      const yyyy = date.getFullYear();
  
      return (months[parseInt(MM - 1)] + ". " + dd + ", " + yyyy);
    }   


    //show ratee in assignee only
    let countRowsNumber = 1;
    const rows = requestsData ? requestsData.map((request) => {
      let row = {};
      const ratee = request.assignment ? request.assignment.assignee.find(assignee => assignee.id === request.assignment.assignee_representative_id) : null;
      const assignee_name = ratee && ratee.profile ? `${ratee.profile.last_name}, ${ratee.profile.first_name.charAt(0)}.,` : null;
                    
        
        row =  {
          id: request.id,
          number: countRowsNumber++,
          requested_by: request.requested_info ? `${request.requested_info.last_name}, ${request.requested_info.first_name} ${request.requested_info.middle_name.charAt(0)}.` :null,
          request_datetime: dateFormatter(new Date(request.request_datetime)),
          description: request.description,
          status: request.status ? request.status.description : null,
          assignee: assignee_name
        };                     
      return row;
    }):null

    return (
        <div style={{ height: 400, width: '100%' }}>
            <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                disableSelectionOnClick                               
            />
        </div>
    )

}

export default RequestTable;

