Multiple Dialogs on the same page

Question

I'm planning to make two different Dialog modals using @material-ui/core.

My file structure as is follows:

|-components/
|-|-index.js
|-|-common/
|-|-|-header.jsx
|-|-|-searchModal.jsx
|-|-|-signModal.jsx

I'm trying to import those two different modals into header.jsx to open those modals with React Buttons on the header.jsx. It is already possible for me to import those from header.jsx directly using index.js

I need two separate types of Dialogs, one for searchModal and one for signModal (sign-in/up).

Since I am a beginner at ReactJS, I don't know how to import those and refer to their const properly from the remote file, which calls them via buttons. I tried to make something similar to this article here and also this one. But even though I tried copying and adjusting code from there, it did not exactly work, because the entire code wasn't shared and the project structure was way different than mine.

Currently, I'm trying to achieve it like this:

index.js

// common sources
export {default as Header} from "./common/header.jsx";
export {default as SearchModal} from "./common/searchModal.jsx";
export {default as SignModal} from "./common/signModal.jsx";

header.jsx

import React, {useState} from "react";
import Button from "@material/react-button";

import {SearchModal, SignModal} from "../";

const Header = (props) => {

    const [searchOpen, setSearchOpen] = useState(false);
    const [signOpen, setSignOpen] = useState(false);

    const handleSearchOpen = () => {
        setSearchOpen(true);
    };

    const handleSignOpen = () => {
        setSignOpen(true);
    };

    const handleClose = () => {
        setSearchOpen(false);
        setSignOpen(false);
    };

    return(
        <div>
            <Button raised onClick={props.handleSearchOpen}>
                Search
            </Button>
            <SearchModal open={searchOpen} handleClose={() => setSearchOpen(false)}/>
            <Button raised onClick={props.handleSignOpen}>
                Sign in - up
            </Button>
            <SignModal open={signOpen} handleClose={() => setSignOpen(false)}/>
        </div>
    );

signModal.jsx

import React from "react";
import Button from "@material/react-button";

import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";

const SignModal = (props) => {
    return(
        <Dialog
            open={props.signOpen}
            onClose={props.handleClose}
            aria-labelledby="signModalTitle"
            aria-describedby="signModalDescription"
        >
            <DialogTitle id="dialog">{"title"}</DialogTitle>
            <DialogContent>
            <DialogContentText id="signModalDescription">
                modal description
            </DialogContentText>
            <TextField
            required
            id="signEmail"
            label="Username or email"
            placeholder="Required"
            variant="outlined"
            data-owner="signModal"
            autoFocus
            />
            <TextField
            required
            id="signPassword"
            label="Password"
            type="password"
            autoComplete="current-password"
            placeholder="Required"
            variant="outlined"
            data-owner="signModal"
            />
            </DialogContent>
            <DialogActions>
            <Button raised onClick={props.handleClose}>
                Continue
            </Button>
            </DialogActions>
        </Dialog>
    );
}

export default SignModal

searchModal.jsx is basically the same with signModal.jsx, but with different items and design.

I'm not sure where I'm wrong, any suggestion is appreciated.

Answer 1

I've found the solution myself.

This is what I needed to change on header.jsx

<div>
    <Button raised onClick={handleSearchOpen}>
        Search
    </Button>
    <SearchModal searchOpen={searchOpen} handleClose={() => handleClose()}/>
    <Button raised onClick={handleSignOpen}>
        Sign
    </Button>
    <SignModal signOpen={signOpen} handleClose={() => handleClose()}/>
</div>

The open parameters needed to be changed to props on either modal, meaning searchOpen and signOpen. Now it works.