React - loop: pass data to Modal component - reactjs

Question

I am quite new to React and I am playing around with Gatsby.
I would like to show a list of team members and when clicking on one, further details should show in a modal (react-modal). My data is gathered after which I loop through it and create a modal (based on https://codepen.io/claydiffrient/pen/pNXgqQ) for each member. However, I cannot figure out how to pass all data to the modal.
What I have now (simplified):
import React from "react";
import Modal from "react-modal";
export default class Team extends React.Component {
constructor() {
super();
this.state = {
showModal: false,
};
this.handleOpenModal = this.handleOpenModal.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
}
handleOpenModal = (member) => {
this.setState({
showModal: true,
memberDetail: member,
});
};
handleCloseModal() {
this.setState({ showModal: false });
}
render() {
return (
<>
{this.props.data &&
this.props.data.map(({ node: member }) => (
<div key={member.frontmatter.title}>
<h3
dangerouslySetInnerHTML={{
__html: member.frontmatter.title,
}}
></h3>
<button
onClick={() =>
this.handleOpenModal(`${member.frontmatter.title}`)
}
>
Details
</button>
</div>
))}
<Modal
isOpen={this.state.showModal}
contentLabel="Modal"
onRequestClose={this.handleCloseModal}
>
{this.state.memberDetail}
<button onClick={this.handleCloseModal}>Close Modal</button>
</Modal>
</>
);
}
}
This seems to work fine. However, now I would like to make all member data available to the Modal. And this I cannot figure out. The data comes from markdown files and looks like follows:
---
title: Some title
subTitle: some subtitle
mainImage: /images/team/hello.jpg
sequence: 20
---
Some markdown text here.
Could be related to How can I pass data to Modal using react. Edit or Delete? but I am not sure (cannot get it to work with the information from there).