How to pass data to React components with redux? - reactjs

Question

I am completely new to the field which is why I might be having a silly question over here.
I have set up a react-redux app. All the redux boilerplate is ready and is functioning properly. Now, I am willing to add a feature that will take data from one React Component and pass it to another, while hiding it or deleting it from the first component.
My question is, should I set up new action and update my root reducer in order to do that or there is an easier way to do that?
This is my first component which I am willing to take data from by clicking the "Rent" button. Also, I want the data piece to temporarily disappear from this component and appear in the second one.
class Available extends Component {
componentDidMount() {
this.props.getRentals();
}
onDeleteClick = (id) => {
this.props.deleteRental(id);
}
render() {
const { rentals } = this.props.rental
return (
<Container fluid>
<h2>List of Available Bikes</h2>
<ListGroup>
<TransitionGroup className="rental-list">
{ rentals.map(({ _id, name, bikeType, price }) => (
<CSSTransition key={_id} timeout={500} classNames="fade">
<ListGroupItem>
{name} / {bikeType} / ${price} / per hour
<Button
className="remove-btn float-right"
color="danger"
size="sm"
onClick={this.onDeleteClick.bind(this, _id)}
>Delete</Button>
<Button
className="remove-btn float-right"
color="primary"
size="sm"
onClick={this.onRentClick(this, _id)}
>Rent</Button>
</ListGroupItem>
</CSSTransition>
))}
</TransitionGroup>
</ListGroup>
</Container>
)
}
}
And this is the second component that I am willing to pass the data to. Also, I am willing to add a feature that will bring the data piece back to the first component when I click the "Cancel Rent" button.
class Rented extends Component {
componentDidMount() {
this.props.getRentals();
}
render() {
const { rentals } = this.props.rental
return (
<Container fluid>
<h2>List of Rented Bikes</h2>
<ListGroup>
<TransitionGroup className="rental-list">
{ rentals.map(({ _id, name, bikeType, price }) => (
<CSSTransition key={_id} timeout={500} classNames="fade">
<ListGroupItem>
{name} / {bikeType} / ${price} / per hour
<Button
className="remove-btn float-right"
color="danger"
size="sm"
>Cancel Rent</Button>
</ListGroupItem>
</CSSTransition>
))}
</TransitionGroup>
</ListGroup>
</Container>
)
}
}
Please let me know what is the best solution here :)