score:0

In App.js

import React from "react";
import Model from "./Model";

class App extends React.Component {
  state = { status: false, text: "" };
  handleClick = () => {
    this.setState(prev => ({ status: !prev.status }));
  };
  handleChange = e => {
    this.setState({ text: e.target.value });
  };
  render() {
    const { status, text } = this.state;
    return (
      <>
        <button onClick={this.handleClick}>Open photo entry dialog</button>
        <ChildComponent
          isOpen={status}
          text={text}
          handleChange={this.handleChange}
          handleClick={this.handleClick}
        />
      </>
    );
  }
}
const ChildComponent = ({ isOpen, text, handleChange, handleClick }) => {
  return (
    <>
      {isOpen && (
        <Model
          status={isOpen}
          handleClick={handleClick}
          text={text}
          handleChange={handleChange}
        />
      )}
    </>
  );
};
export default App;

In Model.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button, Modal, Form } from "react-bootstrap";

export default function Model({ handleClick, status, handleChange, text }) {
  return (
    <>
      <Modal show={status} onHide={handleClick}>
        <Modal.Header closeButton>
          <Modal.Title>Gallary</Modal.Title>
        </Modal.Header>
        <Form.Group controlId="formBasicEmail">
          <Form.Control
            type="text"
            value={text}
            placeholder="Enter Something"
            onChange={handleChange}
          />
        </Form.Group>
        <Modal.Body>
          Woohoo, you're reading this text in a modal from your input:{" "}
          <strong>{text}</strong>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClick}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClick}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

score:0

This requires passing a function as props. I am assuming there is some relation between both the components so you must be calling the second component from the first component.

Solution

Let's call the component that contains Modal as C1 and the component that needs to open the Modal as C2 You need to pass a function as props from C1 to C2 which opens the Modal.

Define the function openModal in C1:

openModal(){                               \\Function to open the Modal
  this.setState({modal:true})              \\modal state is used to define the state of the modal. When it is true, the modal is open.
}


Pass openModal function from C1 to C2 by using this in C1:
<C2 openModal={this.openModal} />

Now, in C2 use this script to open the Modal:

this.props.openModal()                      \\Use this in the event which opens the Modal

Related Query

More Query from same tag