1

newbie in react here may I request for your assistance on below?

wont able to open modal component from other function component

can i get an e.g in which one component have modal and from other component we can open that modal in react js with react-modal package thank you.

Need help

nilemandal
  • 30
  • 1
  • 7

3 Answers3

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>
    </>
  );
}
Akhil
  • 411
  • 4
  • 13
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
Vaibhav Srivastava
  • 27
  • 5
0

use redux or any state management library to track open state

sathithya yogi
  • 1
  • 1