CODEWITHSUNDEEP
reactjs
dave
dave

Reputation: 103

Trying to display a modal in react js when a button is clicked

I'm trying to display a modal in react js when I click a button but for some reason it doesn't work. This is my modal component:

import React, { Component } from "react";
import { Modal, ModalHeader, Button, ModalBody, ModalFooter } from "reactstrap";

class InstructionsModal extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Modal>
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">Guide</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Centered Modal</h4>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
            ac consectetur ac, vestibulum at eros.
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="danger" onClick={this.props.onHide}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }
}
export default InstructionsModal;

This is welcome class in which I call the component onclick on the button called instructions:

let closeModal = () => {
      this.setState({ viewModal: false });
    }; 


               <ButtonToolbar>
              <Button onClick={() => this.setState({ viewModal: true })}>
                <Nav>Instructions</Nav>
              </Button>
              <InstructionsModal
                show={this.state.viewModal}
                onHide={closeModal}
              />
            </ButtonToolbar>

Any help thanks or any alternative way of doing this?

Upvotes: 0

Views: 438

Answers (4)

Vijay Gehlot
Vijay Gehlot

Reputation: 80

You didn't have create the state to open the model like:

class InstructionsModal extends Component {
  constructor(props) {
    super(props);
     viewModal:flase
  }

then you can open and close model like that:

//for open Model**
handleOpen=()=>{
this.setState({viewModal:true});
}

//for close**
handleClose=()=>{
this.setState({viewModal:false});
}

Upvotes: 0

Oshini
Oshini

Reputation: 633

try below code.


import {
  Button,
  Container,
  InputGroup,
  FormControl,
  Row,
  Col,
  Modal
} from "react-bootstrap";

  this.state = {
    modalShow: false,
    title: "title",
    message: "message"
   }

  handleShow() {
    this.setState({ modalShow: true });
  }

  handleClose() {
    this.setState({ modalShow: false });
  }


 render() {
//Note: this is sample code
  <Button id="modalButton" variant="primary" onClick={this.handleShow}></Button>

        <Modal show={this.state.modalShow} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>{this.state.title}</Modal.Title>
          </Modal.Header>
          <Modal.Body><p>{this.state.message}</p></Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Close
            </Button>
          </Modal.Footer>
        </Modal>
}

Upvotes: 1

Niraj Kaushal
Niraj Kaushal

Reputation: 1502

In InstructionsModal component you are passing show props but that props are not being used in that component. Add isOpen={this.props.show} attribute in Modal component.

import React, { Component } from "react";
import { Modal, ModalHeader, Button, ModalBody, ModalFooter } from "reactstrap";

class InstructionsModal extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Modal isOpen={this.props.show}>
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">Guide</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Centered Modal</h4>
          <p>
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
            ac consectetur ac, vestibulum at eros.
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="danger" onClick={this.props.onHide}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }
}
export default InstructionsModal;

Upvotes: 0

Ravi Khunt
Ravi Khunt

Reputation: 262

you have to set props of modal to show. Try this, if it will help you.

    <Modal
        isOpen={this.state.viewModal}>
        //Your rest JSX here
    </Modal>

Upvotes: 0

Related Questions