how to return a variable in an object jsx

Question

See line in question with >>>. The code is currently like this:

tableData() {
    const filteredEvents = this.props.graphData.events.filter((event) =>
      moment(event.eventDate).isBetween(this.startMoment, this.endMoment)
    );

    const eventsByM = _.groupBy(filteredEvents, (event) => event.metadata.mId);
    const tableRows = Object.values(eventsByM).map((events) => {
      const firstEvent = events[0];

      return ({
>>>     "Mentee Name": firstEvent.modalData.menteeName,
        "Mentor Name": firstEvent.modalData.mentorName,
        "Conversations Logged": events.length,
        tableRowUrl: firstEvent.modalData.tableRowUrl,
      });
    });
    return tableRows;
  }

And I'd like to make the string "Mentee Name" a variable, but jsx is not reading it as a variable. How can I do this? I tried it like this but it literally reads it as "menteeName":

tableData() {
    const filteredEvents = this.props.graphData.events.filter((event) =>
      moment(event.eventDate).isBetween(this.startMoment, this.endMoment)
    );

    const eventsByM = _.groupBy(filteredEvents, (event) => event.metadata.mId);
    const tableRows = Object.values(eventsByM).map((events) => {
      const firstEvent = events[0];
      const menteeName = "Apprentice name";

      return ({
 >>>    menteeName: firstEvent.modalData.menteeName,
        "Mentor Name": firstEvent.modalData.mentorName,
        "Conversations Logged": events.length,
        tableRowUrl: firstEvent.modalData.tableRowUrl,
      });
    });
    return tableRows;
  }

Answer 1

You can use variables as object keys like this:

[menteeName]: firstEvent.modalData.menteeName