How to call an individual modal box component in react?

Question

I wanted to open/load a react bootstrap model box component (Modalbox.js) to App.js, but the modal box open button code in App.js, how to do that? please help. In App.js, there will be multiple buttons for call multiple type modalboxs. modalbox.js should contain only modal box code. modal launch buttons should be in App.js

<button variant="primary" onClick={handleShow}>Launch demo modal</button>

https://codesandbox.io/s/individual-modal-box-component-ti6ugg

Answer 1

I have added only functionality on the show and hide here is code so that you may get the idea props and manage the state accordingly all remaining code it feels free to add more functionality and custome state

    import "./styles.css";
    import Modalbox from "./Modalbox";
    import { useState } from "react";
    export default function App() {
    const[handleShow,sethandleShow] = useState(false)
  return (
<div className="App">
  <button variant="primary" onClick={()=>sethandleShow(!handleShow)}>
    Launch demo modal
  </button>
 <Modalbox handleShow={handleShow} sethandleShow={sethandleShow} />
</div>
 );
}

modalbox.js

   import React, { useState } from "react";
  import { Modal, Button } from "react-bootstrap";

  function Modalbox(props) {
  const [modalshow, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

   return (
<div>
  {/* <Modal show={modalshow} onHide={handleClose}> */}
  <Modal show={props.handleShow} onHide={()=>props.sethandleShow(!props.handleShow)}>
    <Modal.Header closeButton>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={()=>props.sethandleShow(!props.handleShow)}>
        Close
      </Button>
      <Button variant="primary" onClick={handleClose}>
        Save Changes
      </Button>
    </Modal.Footer>
  </Modal>
</div>
  );
 }

 export default Modalbox;

Answer 2

You should create a state in App.js called "showModal" which is a boolean. Pass that state as props to Modal. also in your handleshow function you should setState based on the prevState like so: setShowModal((prevState)=> !prevState). In your modal component you should use the showModal prop you passed but remember never use props as the defaut value in useStates.

Answer 3

You put the state for showing the Modalbox in it, but it doesn't know from outside when to show. I'm afraid you have to at least put the show state in App.js. The rest of the logic can remain in Modalbox.js.

I forked your condesandbox:

https://codesandbox.io/s/individual-modal-box-component-forked-moy9ok

The other possibility is to use the Context API and maybe write a hook for it. Then you wouldn't need to directly pass the state down to Modalbox. But it's not really a suitable use case for the Context API. It's rather for prop drilling.