With your UpdateDialog React component defined and nicely linked to the top-level onUpdate function, the last step is to wire it into the existing layout of components.

The CreateDialog created in the previous session was put at the top of the EmployeeList because there is only one instance. However, UpdateDialog is tied directly to specific employees. So you can see it plugged in below in the Employee React component:

src/main/resources/static/app.jsx - Employee with UpdateDialog var Employee = React.createClass({ handleDelete: function () { this.props.onDelete(this.props.employee); }, render: function () { return ( <tr> <td>{this.props.employee.entity.firstName}</td> <td>{this.props.employee.entity.lastName}</td> <td>{this.props.employee.entity.description}</td> <td> <UpdateDialog employee={this.props.employee} attributes={this.props.attributes} onUpdate={this.props.onUpdate}/> </td> <td> <button onClick={this.handleDelete}>Delete</button> </td> </tr> ) } })

In this session, you switch from using the collection resource to individual resources. The fields for an employee record are now found at this.props.employee.entity . It gives us access to this.props.employee.headers where we can find ETags.

There are other headers supported by Spring Data REST (like Last-Modified) which aren’t part of this series. So structuring your data this way is handy.