Best way to show modals in React

Question

I'm just starting in ReactJS. I have read a lot about the use of modal windows but I am not sure which is the most correct way. I am currently using via callbacks.

Reactstrap Modal Dialog Component:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { RouteProps } from 'react-router';

interface IModalProps extends RouteProps {
  title: string;
  content: string;
  isOpen: boolean;
  onClose: any;
}

class SimpleModal extends React.Component<IModalProps, any> {

  constructor(props) {
    super(props);

    this.closeDialog = this.closeDialog.bind(this);
  }

  public closeDialog() {
    this.props.onClose();
  }

  public render() {
    const { title, content, isOpen } = this.props;

    return ReactDOM.createPortal(
      <React.Fragment>
        <Modal isOpen={isOpen}>
          <ModalHeader>{title}</ModalHeader>
          <ModalBody>
            {content}
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.closeDialog}>Aceptar</Button>
          </ModalFooter>
        </Modal>
      </React.Fragment>,
      document.getElementById('root') as HTMLElement
    );
  }
}

export default SimpleModal;

App Main Component:

import * as React from 'react';
import { Button, FormGroup } from 'reactstrap';
import SimpleModal from '../../shared/components/modals/simple-modal';

class App extends React.Component<any, any> {

  constructor(props: any) {
    super(props);

    this.state = {
      messageTitle: '',
      messageContent: '',
      showModal: false
    };

    this.handleHelloWorldModal = this.handleHelloWorldModal.bind(this);
    this.handleStackoverflowModal = this.handleStackoverflowModal.bind(this);
    this.handleModalClose = this.handleModalClose.bind(this);
  }

  public handleHelloWorldModal() {
    this.setState({
      messageTitle: 'Information',
      messageContent: 'Hello World',
      showModal: true
    });
  }

  public handleStackoverflowModal() {
    this.setState({
      messageTitle: 'Information',
      messageContent: 'StackOverFlow',
      showModal: true
    });
  }

  public handleModalClose() {
    this.setState({ showModal: false });
  }

  public render() {
    const { showModal, messageTitle, messageContent } = this.state;

    const modalProps = {
      title: messageTitle,
      content: messageContent,
      isOpen: showModal,
      onClose: this.handleModalClose
    }

    return (
      <div>
        <FormGroup>
          <Button color="warning" onClick={this.handleHelloWorldModal}>Show HelloWorld Modal</Button>
        </FormGroup>

        <FormGroup>
          <Button color="danger" onClick={this.handleStackoverflowModal}>Show StackOverFlow Modal</Button>
        </FormGroup>

        <SimpleModal {...modalProps} />
      </div>
    );
  }
}

export default App;

So, is it correct way to use modals in react ? Any alternative way without use redux or any plugins like react-modals?

Answer 1

The way you wrote the code is correct. but you don't need to have a Modalclose method inside the ModalComponent. you can pass the method as property from Main Component also. check below code.

App Main Component:

import * as React from 'react';
import { Button, FormGroup } from 'reactstrap';
import SimpleModal from '../../shared/components/modals/simple-modal';

class App extends React.Component<any, any> {

  constructor(props: any) {
    super(props);

    this.state = {
      messageTitle: '',
      messageContent: '',
      showModal: false
    };

    this.handleHelloWorldModal = this.handleHelloWorldModal.bind(this);
    this.handleStackoverflowModal = this.handleStackoverflowModal.bind(this);
  }

  handleHelloWorldModal() {
    this.setState({
      messageTitle: 'Information',
      messageContent: 'Hello World'
    });
  }

  handleStackoverflowModal() {
    this.setState({
      messageTitle: 'Information',
      messageContent: 'StackOverFlow'
    });
  }

  openModal () {
      this.setState({showModal: true});
  }

  public render() {
    const { showModal, messageTitle, messageContent } = this.state;

    const modalProps = {
      title: messageTitle,
      content: messageContent,
      isOpen: showModal
    }

    return (
      <div>
        <FormGroup>
          <Button color="warning" onClick={this.handleHelloWorldModal}>Show 
          HelloWorld Modal</Button>
        </FormGroup>

        <FormGroup>
          <Button color="danger" onClick={this.handleStackoverflowModal}>Show StackOverFlow Modal</Button>
        </FormGroup>

        <SimpleModal onClick={() => this.openModal()} {...modalProps} 
         modalClose={() => this.setState({ showModal: false })} 
        />
      </div>
    );
  }
}

export default App;

Reactstrap Modal Dialog Component:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { RouteProps } from 'react-router';

interface IModalProps extends RouteProps {
  title: string;
  content: string;
  isOpen: boolean;
  onClose: any;
}

class SimpleModal extends React.Component<IModalProps, any> {

  constructor(props) {
    super(props);
  }
  public render() {
    const { title, content, isOpen } = this.props;

    return ReactDOM.createPortal(
      <React.Fragment>
        <Modal isOpen={isOpen}>
          <ModalHeader>{title}</ModalHeader>
          <ModalBody>
            {content}
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.props.modalClose}>Aceptar</Button>
          </ModalFooter>
        </Modal>
      </React.Fragment>,
      document.getElementById('root') as HTMLElement
    );
  }
}

export default SimpleModal;

Answer 2

Actually, yes you're correct. Using state to control the modal is the best way. Also, react modules are created so that you can reuse other people's code and not to code on your own. As a developer, it is common to spend more time figuring out what the code does rather than actually writing code. If you want a simpler modal, you can try this

Answer 3

Try this one react-modal-controller . But works only with hooks