How to move items between two components in react

Question

I'm trying to transfer an item from one list to the next, along with it's object ID so i will be able to delete it after. Currently it looks like this:

The problem is, I can't seem to figure out how to select the object and move it to the delete panel with that information (both panels are just panel components from bootstrap). I tried using the checkboxes (shown below), but I wasn't able to select the value of the list group (also a bootstrap component) to pass it to the next panel.

The first panel get's passed the organizations from the database, into this.props, but the second I was just going to use an object that I would add to when the button on the first panel was clicked and pass that object into this.props.

Is there a best practice way to do this? Any help on solutions would be great. Right now the remove part is just static and doesn't actually do anything. I'm new to react and one way binding, but I feel like something that seems this simple shouldn't have me stumped like this.

Answer 1

You could maintain an array like organizationIdsToDelete or even organizationsToDelete that gets added to when you select organizations to be deleted. Then pass the original organizations list to the first component as you are now, and pass the filtered list of organizations to delete to the second component.