MongoDB несколько циклов для разделения данных и получения данных из замкнутого цикла

Question

Сейчас я переключаюсь с PHP на JavaScript, так что это большой опыт обучения.Прямо сейчас я застрял на чем-то.

Я работаю над инструментом платформы, который позволяет людям регистрировать действия для проектов.Выглядит это так:

Красная часть уже сделана, но в зеленой части есть проблема.У меня есть следующий документ в моей коллекции ActivityCard:

{
  "_id" : "tTuiMhh2LFMqdywgc",
  "cardName" : "Diana Walls",
  "activitycardType" : 20,
  "startingDate" : "1987-07-01",
  "remainingHours" : 20,
  "activities" : [ 
    {
        "activityName" : "Cairo Daniel",
        "activityTotal" : "5",
        "activityEmployee" : "Repudiandae non voluptate quaerat in eaque qui enim cumque aspernatur incididunt eaque quas cumque",
        "activityDate" : "2011-10-14"
    }, 
    {
        "activityName" : "Chaney Jarvis",
        "activityTotal" : "20",
        "activityEmployee" : "Fugiat voluptates ad facilis soluta nemo",
        "activityDate" : "2010-05-12"
    }
  ],
  "isArchived" : 0
}

, поскольку действия принадлежат только одному проекту, я подумал, что было бы хорошо вложить данные, как в примере выше.но я хотел бы распечатать данные ниже основных данных для карточек деятельности (красная часть).Файл моей карты активности, где я получаю данные, выглядит следующим образом:

class ActivityCardDetails extends Component {
constructor(props) {
    super(props);
    document.title = 'Nieuwe strippenkaart';

    this.state = {
        message: ''
    };
}
renderActivityCardDetails () {
    return this.props.activitycards.map( activity => {

        return (
            <div className="medium-12 details" key={activity._id}>
                <input type="hidden" ref="currentActivityCard" value={activity._id} />

                <div className="medium-12 page-action">
                    <Link to='/strippenkaarten' className="link link-purple">
                        <img src="../images/icons/arrow-left.svg" alt="" />
                        Terug
                    </Link>

                    <Link to='/strippenkaarten' className="link link-purple">
                        Uren afboeken
                    </Link>
                </div>
                <div className="medium-12">
                    <div className="medium-3">
                        <div className="top">
                            <strong>Bedrijfsnaam</strong>
                            <p>Bedrijfsnaam</p>
                        </div>
                        <div className="bottom">
                            <strong>Locatie</strong>
                            <p>
                                Straat <br />
                                Postcode Plaats <br />
                                Land
                            </p>
                        </div>
                    </div>
                    <div className="medium-3">
                        <div className="top">
                            <strong>Product</strong>
                            <p>{activity.cardName}</p>
                        </div>
                        <div className="bottom">
                            <strong>Datum ingang</strong>
                            <p>{activity.startingDate}</p>
                        </div>
                    </div>
                    <div className="medium-3">
                        <div className="top">
                            <strong>Totale uren</strong>
                            <p>{activity.activitycardType} uur</p>
                        </div>
                        <div className="bottom">
                            <strong>Resterende uren</strong>
                            <p>{activity.remainingHours} uur</p>
                        </div>
                    </div>
                    <div className="medium-3">
                        <div className="top">
                            <strong>Actieve projecten</strong>
                            <p>gekoppelde projecten</p>
                        </div>
                    </div>

                    <div className="medium-12 progress">
                        <div className="progress-bar">
                            <label>{activity.remainingHours} uur resterend</label>
                            hier komt een nieuwe progress
                        </div>
                    </div>
                </div>
            </div>
        );
    });
}
renderCardDetails() {
  // HERE 
  // in this loop I need to get the ID for the current activity card, outside the mapping function
}
render() {
    return (
        <div className="medium-12 activitycard-details details">
            { this.state.message ? <p className="message">{this.state.message}</p> : undefined }

            <div className="list-wrapper">
                <div className="list-box clear">
                    {this.renderActivityCardDetails()}
                </div>
            </div>
        </div>
    );
  }
}
export default withTracker( (props) => {
  Meteor.subscribe('activitycards');

  const activitycardID = props.match.params.activitycardID;

  return { 
    activitycards: ActivityCards.find( {
        '_id': activitycardID
    } ).fetch()
  };
})(ActivityCardDetails);

Другой вопрос, который у меня есть: в приведенном выше коде я добавил пустой метод с некоторыми комментариями, один из которых был: // в этом циклеМне нужно получить идентификатор для текущей карточки активности, вне функции отображения, я ссылаюсь на отношения один ко многим (сохраняйте идентификаторы для детей внутри родителя).

Я не знаюлучший способ сохранить идентификатор для текущей карты активности и получить другие данные для него по идентификатору.Нужно ли создавать несколько функций рендеринга, как я делал выше с несколькими функциями отображения?или есть лучший способ?