React - loop: pass data to Modal component

403 Views Asked by At

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

0

There are 0 best solutions below