Assign Id to React components
Solution 1
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.
Solution 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.
mayank
Updated on July 09, 2022Comments
-
mayank almost 2 years
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>