How to provide Id or Attribute to the react components - html

Question

We need to provide some identifier for our react components so that we can do the automation test case writing on those controls.
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '#progress/kendo-react-grid';
import products from './products.json';
class App extends React.Component {
state = {
gridData: products
}
render() {
return (
<div>
<Grid
data-grid="myGrid"
style={{ height: '400px' }}
data={this.state.gridData}
>
<Column field="ProductID" title="ID" width="40px" />
<Column field="ProductName" title="Name" width="200px" />
<Column field="Category.CategoryName" title="CategoryName" />
<Column field="UnitPrice" title="Price" width="80px" />
<Column field="UnitsInStock" title="In stock" width="80px" />
<Column field="Discontinued" width="120px"
cell={(props) => (
<td>
<input disabled type="checkbox" checked={props.dataItem[props.field]} />
</td>
)} />
</Grid>
</div>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
We have tried to provide data-grid="myGrid" attribute to the grid but that doesn't seems to work. Could you please suggest what is the mistake here or what will be the solution.

Answer 1

You should pass prop using camelCase so it should be like this:
<Grid dataGrid="myGrid" />
And inside Grid you can specify it like this:
const Grid = ({dataGrid}) => (
<div data-grid={dataGrid} />
)
Or you can just set id to the component <Grid id="myGrid" />