CODEWITHSUNDEEP
reactjsmodal-dialogmaterial-uireact-component
Rainer Winkler
Rainer Winkler

Reputation: 565

How can I control a dialog from another module with react and materialUI

I am trying to open a materialUI dialog component from another react component with the help of a button. The wanted result is that it opens the dialog everytime I click on the button. The current result is that it only opens every second time I click on the button.

Does anyone of you have an idea why this happens? Do I have to use the useeffect() Hook?

This is the code snippet of the parent component with the button:

const [showModal, setShowModal] = useState(false);

const saveButtonHandler1 = async () => {
    function showModalHandler() {
      setShowModal(!showModal);
      .... some other code.....
    }}

And this is the code snippet of the child dialog component:

export default function MaxWidthDialog(props) {
  useEffect(() => {
    handleClickOpen();
  }, []);

  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const [fullWidth, setFullWidth] = React.useState(true);
  const [maxWidth] = React.useState("sm");

  const handleClickOpen = () => {
    setOpen(true);
    setTimeout(() => setOpen(false), 16000);
  };

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

  /* const handleMaxWidthChange = event => {
    setMaxWidth(event.target.value);
  }; */

  const handleFullWidthChange = (event) => {
    setFullWidth(event.target.checked);
  };
 


  return (
    <React.Fragment>
      <Dialog
        fullWidth={fullWidth}
        maxWidth={maxWidth}
        open={open}
        onClose={handleClose}
        aria-labelledby="max-width-dialog-title"
      >
        <DialogTitle id="max-width-dialog-title"></DialogTitle>
        <DialogContent>
          <DialogContentText>
            <CanvasLoading />
          </DialogContentText>
        </DialogContent>
        <DialogActions></DialogActions>
      </Dialog>
    </React.Fragment>
  );
}

Upvotes: 3

Views: 4869

Answers (2)

Halim
Halim

Reputation: 278

Hello @Rainer from what you said I understood this:

  • there is a parent with a button to open the Dialog each time it is clicked
  • there is a Child with the Dialog

here is a sandbox i created with some of your code and some modifications I made you can start with:

import React, { useState } from "react";
import "./styles.css";
import MaxWidthDialog from "./Child";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {/*
      this is the child component with props to 
      get the status of dialog and to handle close the dialog
      */}
      <MaxWidthDialog
        isDialogOpened={isOpen}
        handleCloseDialog={() => setIsOpen(false)}
      />
      <button onClick={() => handleOpen()}>Open Dialog</button>
    </div>
  );
}

https://codesandbox.io/s/ecstatic-shamir-1ffso?file=/src/App.js

PS: didn't need to use UseEffect

Upvotes: 4

Gabriel Ferrari
Gabriel Ferrari

Reputation: 89

If you have a parent component you can use props and callbacks to share this data, it works if you have between components inside a parent component.

But, if your components don't have this relation, I think the best approach to share information between two components without a parent component is using Redux.

Upvotes: 0

Related Questions