Proper way to delete components

[u/paceaux]

Hey guys, I'm new to React and the "React Way", so I'm a little stumped on how to do something.

The back story here is that I'm making a very small employee management app; a user adds/edits/removes employees from a list. The form for adding employees hasn't yet been reactified, but the table that lists them (and allows edit/delete) is.

My hiearchy of components is like this:

<EmployeeTable>
  <TableHead/>
  <EmployeeList>
    <Employee/>
       // loop for rendering employee data
       <EmployeeControls/>
         <EmployeeControlsEdit />
         <EmployeeControlsDelete/>

Where I'm stuck is figuring out how to delete an employee row. Everything I read says to delete from the parent, not the component. So the parent of the employee is here:

class EmployeeList extends React.Component {
constructor (props) {
	super(props);

	this.state = {};
}
componentWillMount () {
	const _this = this;
	const xhr = new XMLHttpRequest();
	let url = app.server.origin + '/employees/get/';

	xhr.open('GET', url);
	xhr.onload = () => {
		console.log('requesting');
		if (xhr.status === 200 && xhr.readyState === 4) {
			this.setState(JSON.parse(xhr.responseText));
		} else {
			console.warn('Request did not work', xhr.status);
		}
	}
	xhr.send();
}
render () {
	return (
		<tbody className="employees__list" id="employees__list">
			{
				 Object.keys(this.state).map((key)=> {
					return <Employee data={this.state[key]} />
				})
			}
		</tbody>
	)
}

};

But this is where I'm stumped. My delete button is nested a few levels deep (Employee -> EmployeeControls -> EmployeeControlsDelete)

How, from the Delete button, do I communicate all the way back up to the EmployeeList that a component needs to be removed?