MongoDB multiple loops to separate data

Hi,

I am new to this forum and also pretty new to MongoDB.
I’m currently switching from PHP to JavaScript so this is all a big learning experience.
Right now I am stuck on something.

I am working on a platform tool that allows people to register activities for projects. It looks like this:
Admin%20interface%20-%20strippenkaart%20details

The red part is already done, but the green part is where the problem lies.
I have the following document inside my ActivityCard collection:

{
    "_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
}

since the activities only belong to one project, I thought it would be fine to nest the data like the example above. but I would like the print the data below the main data for the activity cards (the red part).
My activity card file where I get the data looks like this:

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);

Another question I have: In the above code I added an empty method with some comments with one of them being:
// in this loop I need to get the ID for the current activity card, outside the mapping function, I’m referencing to a one to many relations ( store the id’s for children inside the parent).
I don’t know the best way to store the id for the current activity card and get other details for it by the id. Do I need to create multiple render functions as I did above with multiple mapping functions? or is there a better way?

thanks, a lot in advance!