Assign Id to React components

Question

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>

score 5 · Answer 1 · answered Feb 06 '19 at 12:50

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.

score 2 · Answer 2 · edited Jun 03 '20 at 13:52

2

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.

edited Jun 03 '20 at 13:52

Andreas Riedmüller

1,217
13
17

answered Sep 19 '18 at 05:39

Lazar Nikolic

4,261
1
22
46

Got it, but I need to get some fixed Id's for our react controls – mayank Sep 19 '18 at 05:42
What do you mean fixed id? Can you edit your question and put a bit more of your code, lets say a whole file? – Lazar Nikolic Sep 19 '18 at 05:43
Ok, question is edited. Fixed id means Grid should have id for ex : "myGridId" and Column component have id for ex : "FirstColumn" – mayank Sep 19 '18 at 05:46
You have already done it here with id=... just put it inside {} to be id={networkTypeId} and do this for all Column components – Lazar Nikolic Sep 19 '18 at 05:55
It is giving an error during compile time : Line 200: 'networkTypeId' is not defined no-undef – mayank Sep 19 '18 at 05:58
It wont break but still id is not assigned to the controls – mayank Sep 19 '18 at 06:14
Can you pls describe what are you going to use the ID for? I recommend to use `ref` instead. Id is not typical in react dom handling. – gazdagergo Sep 19 '18 at 06:19
We need to use that id for our Automation scripts, so that by id we can identify the control and do the necessary operation – mayank Sep 19 '18 at 06:39
id in React is not the HTML id. When you declare id as prop of a component in React that component does not have id in its html, so I think your team needs to find some other strategy for automation. – Lazar Nikolic Sep 19 '18 at 12:49
2

If you use lodash you can also use the built in function ```_.uniqueId()``` to avoid installing another module. – Andreas Riedmüller Jun 04 '20 at 08:02

Assign Id to React components

2 Answers2