CODEWITHSUNDEEP
reactjs
user3794648
user3794648

Reputation: 483

React/Material UI Dialog : how to close a dialogue

I'm trying to create a simple confirmation dialogue within react and Material UI. I've gotten it to open in response to submitting a form. However, when I try to create a button within the dialogue that will close it, nothing happens when I click the button. I'm tying the open state to a property so that the dialog can be opened from code in the parent/containing module. If there's a better way to do that, I'm all ears.

Here's my component code:

import React, { Component } from 'react';
import DialogTitle from '@material-ui/core/DialogTitle';
import Dialog from '@material-ui/core/Dialog';

class ResponseDialog extends Component
{
    constructor(props) {
      super(props);
      console.log(this.props);

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

    closeDialog ()
    {
        this.props.open = false;
    }


    render()
    {
        return(
            <div>
                <Dialog  open={this.props.open}>
                      <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
                      <button onClick = {this.closeDialogue}>OK</button>
                  </Dialog>
            </div>
        )};
}

export default ResponseDialog;

Upvotes: 2

Views: 10210

Answers (3)

giovaniZanetti
giovaniZanetti

Reputation: 472

Using functional component:

import DialogTitle from '@material-ui/core/DialogTitle'
import Dialog from '@material-ui/core/Dialog'
import { useState } from 'react'

const App = () => {
  const [open, setOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setOpen(!open)}>OK</button>
      <header className='App-header'>
        <Dialog open={open}>
          <DialogTitle id='simple-dialog-title'>Set backup account</DialogTitle>
          <button onClick={() => setOpen(!open)}>OK</button>
        </Dialog>
      </header>
    </div>
  )
}

export default App

Using class components:

import './App.css'
import DialogTitle from '@material-ui/core/DialogTitle'
import Dialog from '@material-ui/core/Dialog'
import { Component } from 'react'

class App extends Component {
  // There is no need of the constructor, as long as you use arrow => functions
  // Just declare the state like this
  state = {
    open: false,
  }

  render() {
    return (
      <div className='App'>
        <button onClick={() => this.setState({ open: !this.state.open })}>
          Open
        </button>

        <header className='App-header'>
          <Dialog open={this.state.open}>
            <DialogTitle id='simple-dialog-title'>
              Set backup account
            </DialogTitle>
            <button onClick={() => this.setState({ open: !this.state.open })}>
              OK
            </button>
          </Dialog>
        </header>
      </div>
    )
  }
}
export default App

Upvotes: 4

user3794648
user3794648

Reputation: 483

This is the solution I cam up with. It works, but Mahuri's solution appears to be more concise, so I'm studying that as well.

import React, { Component } from 'react';
import DialogTitle from '@material-ui/core/DialogTitle';
import Dialog from '@material-ui/core/Dialog';

class ResponseDialog extends Component
{
    constructor(props)
    {
        super(props);
        this.state =
        {
            openFlag: props.open
        };

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


    componentDidUpdate(prevProps) {
    console.log(this.props);
    console.log(prevProps);
      if (prevProps.open !== this.props.open) {
        this.setState({
            openFlag: this.props.open
        })
      }
    }

    closeDialog ()
    {
        this.setState({
            openFlag: false
        });
    }


    render()
    {
        return(
            <div>
                <Dialog  open={this.state.openFlag}>
                      <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
                      <button onClick = {this.closeDialog}>OK</button>
                  </Dialog>
            </div>
        )};
}

export default ResponseDialog;

Upvotes: 0

Madhuri
Madhuri

Reputation: 1100

Parent component,

 const [open, setOpen] = useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={handleClickOpen}>Open Dialog</button>
      <Dialog open={open} handleClose={handleClose} />
    </div>
  );

Dialog component

const DialogComponent = ({ open, handleClose }) => {
  return (
    <div className="App">
      <Dialog open={open}>
        <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
        <button onClick={handleClose}>OK</button>
      </Dialog>
    </div>
  );
};

check this, I have used hooks, let me know if you want class component https://codesandbox.io/s/simple-dialog-0bjss

Upvotes: 2

Related Questions