Added key field to data table columns and rows.

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent 7ec90258d5
commit ead3c74fe4

@ -223,34 +223,46 @@ class ApplicationListing extends Component {
{this.headers.map(header => { {this.headers.map(header => {
if (header.data_id === "applicationName") { if (header.data_id === "applicationName") {
return ( return (
<Col xs="4">{header.label}</Col>) <Col key={Math.random()} xs="4">{header.label}</Col>)
} else if (header.data_id === "image") { } else if (header.data_id === "image") {
return (<Col xs="1">{header.label}</Col>) return (<Col key={Math.random()} xs="1">{header.label}</Col>)
} else if (header.data_id === "edit") { } else if (header.data_id === "edit") {
return <Col xs="1"></Col> return <Col key={Math.random()} xs="1"></Col>
} }
return (<Col>{header.label}</Col>) return (<Col key={Math.random()}>{header.label}</Col>)
})} })}
</Row> </Row>
<hr/> <hr/>
{this.state.searchedApplications.map(application => { {this.state.searchedApplications.map(application => {
return ( return (
<Row className="app-table-row" onClick={() => { <Row key={application.uuid} className="app-table-row" onClick={() => {
this.onRowClick(application.uuid) this.onRowClick(application.uuid)
}}> }}>
<Col xs="1"> <Col key={Math.random()} xs="1">
<img <img
className="app-list-icon" className="app-list-icon"
src={application.icon} src={application.icon}
/> />
</Col> </Col>
<Col xs="4" className="data-table-row-cell"><strong>{application.name}</strong></Col>
<Col className="data-table-row-cell">{application.platform.name}</Col>
<Col className="data-table-row-cell">{application.category.name}</Col>
<Col <Col
className="data-table-row-cell">{application.currentLifecycle.lifecycleState.name} key={Math.random()}
xs="4"
className="data-table-row-cell"
>
<strong>{application.name}</strong>
</Col> </Col>
<Col xs="1"> <Col key={Math.random()} className="data-table-row-cell">{application.platform.name}</Col>
<Col key={Math.random()} className="data-table-row-cell">{application.category.name}</Col>
<Col
key={Math.random()}
className="data-table-row-cell"
>
{application.currentLifecycle.lifecycleState.name}
</Col>
<Col
xs="1"
key={Math.random()}
>
<Button className="custom-flat grey rounded" <Button className="custom-flat grey rounded"
onClick={() => this.onAppEditClick(application.uuid)}> onClick={() => this.onAppEditClick(application.uuid)}>
<i className="fw fw-edit"></i> <i className="fw fw-edit"></i>

Loading…
Cancel
Save