Source:  Twitter logo

We have a React Grid Component and we need to assign the Id for all Grid components. Any suggestions how can we do it? Component snippet is shown below:

<Grid 
    data={this.state.items}
    sortable={{
       allowUnsort: this.state.allowUnsort,
       mode: this.state.multiple,
       sortDir:this.state.sortDir
    }}
    sort={this.state.sort}
    onSortChange={this.sortChange}
    filterable={true}
    filter={this.state.filter}
    onFilterChange={this.filterChange}
    onPageChange={this.pageChange}
    total={this.state.total}
    skip={this.state.skip}
    pageSize={this.state.pageSize}
    pageable={this.state.pageable}
    scrollable={this.state.scrollable}
    //style={{ height: '500px' }}
  >
  <Column
    field="networkName"
    sortable={{
       allowUnsort: this.state.allowUnsort,
       mode: this.state.multiple ? 'multiple' : 'single',
    }}
    onSortChange={this.sortChange} title="Network Name" width="400px" cell={NetworkNameCell}  />
    <Column field="networkGroups" title="Network Groups" width="250px" id="networkGroupsId"/>
    <Column field="networkType" title="Network Type" width="250px" id="networkTypeId"/>
    <Column field="providersCount" title="Assigned Providers"  />
    <Column field="locationsCount" title="Assigned Locations"  />
    <Column cell={this.DeleteCommandCell} title="Action" sortable={false} filterable={false} />
    <span class="k-icon my-refresh-icon-class"></span>
</Grid>

This is not working, because id needs to be set on an HTML element, not on some custom component. You can check out the docs for more info and lists of supported html attributes. Setting this on a table should give you the desired result. E.g.:

 <table id="myTable">
      <tr>
           <td> data </td>
      </tr>
 </table>

In your case what you can do is change your implementation of <Grid/> and make it propagate the passed id to the underlying root html element.

5 users liked answer #0dislike answer #05
Nikolai Tenev profile pic
Nikolai Tenev

You can install npm package called uniqid and import it at the top of your page like this:

import uniqid from 'uniqid'

And then as a prop to Grid component pass id={uniqid()} This will give your component unique id. This all under presumption that you are not using grid inside map or some other looping function in order to render it. If you are doing that, than element of your looping array can serve as id.

2 users liked answer #1dislike answer #12
Lazar Nikolic profile pic
Lazar Nikolic

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).