Using React modal component-CodePudding

I have a component 'Building' which contains a Modal that contains data from the 'building' object, see code:

  <Modal show={show} onHide={handleClose}>
    <Modal.Header closeButton>
      <Modal.Title>{building.name}</Modal.Title>
    </Modal.Header>
    <Modal.Body><p>Purchase Price : {purchase_price}</p></Modal.Body>
    <Modal.Footer>
      <Button variant="primary" onClick={handleClose}>
        Save Changes
      </Button>
    </Modal.Footer>
  </Modal>

This works exactly as expected, I click a button on the screen and the modal pops up with details from the object, 'building'.

What I'd like to do is separate the Modal from the Building component so I can add more fields, and possibly reference it in other locations, but I'm unclear how I should incorporate that.

I want the modal to work something like this :

import '../css/modal.css';
import React, {useState} from 'react'
import { Modal, Button}  from 'react-bootstrap'

  return (
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>{building.name}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <p>Purchase Price : {purchase_price}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>
        <p>something : {something}</p>

      </Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleClose}>
          Save Changes
        </Button>
    </Modal.Footer>
  </Modal>
  );
};

export default Modal

I don't know how to include the reference to this modal, and pass the Building object.

Any suggestions?

CodePudding user response：

Kool, you want to design a component, say ModalOk.

  // figure out the interface
  const ModalOk({ show, handleClose }) => {
    return (
      <Modal show={show} onHide={handleClose}>
        ...
      </Modal>
    )
  }

So this component is expecting show and handleClose to be provided via props.

  <ModalOk show={on} handleClose={onClose} />

Search internet on topics like React function component etc. Or most of the tutorial should cover how to design a component. Of course you are doing some more advanced stuff, ex. consuming something that is not designed by you.

CodePudding user response：

You can simply build a function component for the modal you'd like to build.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const CustomModalBody = (props) => {
  return (
    <div>
      <p>{props.price}</p>
      <p>{props.something1}</p>
      <p>{props.something2}</p>
    </div>
)
}

export default CustomModalBody;

Then you can simply import the component to your main modal component and pass whatever values you'd like to display.