Add a delete function when viewing events (React-Redux-Firebase)

Question

Here I let user to view the details of the event. There will be a button at the end of the event details for them to delete the event. However, how should I go about doing this?

Should I implement the delete function here in the viewing event details file? Or should I create another .jsx file that handles the delete? The delete.jsx file below contains the handleDelete method that will delete the event from the redux store, which then updates the delete to the firestore

VIEWING EVENT DETAILS FILE
import React from "react";
import { connect } from "react-redux";
import { firestoreConnect } from "react-redux-firebase";
import { compose } from "redux";
import { Redirect } from "react-router-dom";
import moment from "moment";
import DeleteEvent from "./DeleteEvent";

const EventDetails = props => {
  const { event, auth } = props;
  if (!auth.uid) return <Redirect to="/signin" />;

  if (event) {
    return (
      <div className="container section project-details">
        <div className="card z-depth-0">
          <div className="card-content">
            <span className="card-title">Subject: {event.subject}</span>
            <p>Venue: {event.venue}</p>
            <p>Time: {event.time}</p>
            <p>Description: {event.description}</p>
            <p>Class Size: {event.size}</p>
          </div>
          <div className="card-action grey lighten-4 grey-text">
            <div>
              Tutor: {event.authorFirstName} {event.authorLastName}
            </div>
            <div>
              Time of class created:
              {moment(event.createdAt.toDate()).calendar()}
            </div>
            <DeleteEvent event={event} />
          </div>
        </div>
      </div>
    );
  } else {
    return (
      <div className="container centre">
        <p>Loading event....</p>
      </div>
    );
  }
};

const mapStateToProps = (state, ownProps) => {
  const id = ownProps.match.params.id;
  const events = state.firestore.data.events;
  const event = events ? events[id] : null;
  return {
    event: event,
    auth: state.firebase.auth
  };
};

export default compose(
  connect(mapStateToProps),
  firestoreConnect([
    {
      collection: "events"
    }
  ])
)(EventDetails);

DELETE.JSX FILE
import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";
import { deleteEvent } from "../../store/actions/eventActions";

const DeleteEvent = ({ event }) => {
  const handleDelete = e => {
    e.preventDefault();
    this.props.deleteEvent(event);
    //this.props.history.push("/"); // redirect to homepage after deletion
  };

  return (
    <div>
      <button onClick={this.handleDelete} className="btn green z-depth-0">
        Delete
      </button>
    </div>
  );
};

const mapDispatchToProps = dispatch => {
  return {
    deleteEvent: event => dispatch(deleteEvent(event))
  };
};

export default connect(null, mapDispatchToProps)(DeleteEvent);