title: Multiple Dialogs on the same page
body: <p>I'm planning to make two different Dialog modals using <code>@material-ui/core</code>.</p>
  <p>My file structure as is follows:</p>
  <pre><code>|-components/
  |-|-index.js
  |-|-common/
  |-|-|-header.jsx
  |-|-|-searchModal.jsx
  |-|-|-signModal.jsx
  </code></pre>
  <p>I'm trying to import those two different modals into <code>header.jsx</code> to open those modals with React Buttons on the <code>header.jsx</code>.
  It is already possible for me to import those from <code>header.jsx</code> directly using <code>index.js</code></p>
  <p>I need two separate types of Dialogs, one for <code>searchModal</code> and one for <code>signModal</code> (sign-in/up).</p>
  <p>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 <a href="https://stackoverflow.com/questions/55202348/how-to-use-multiple-dialog-boxes-and-render-modals-in-reactjs">this article here</a> and also <a href="https://stackoverflow.com/questions/55202348/how-to-use-multiple-dialog-boxes">this one</a>. 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.</p>
  <p>Currently, I'm trying to achieve it like this:</p>
  <p>index.js</p>
  <pre><code>// common sources
  export {default as Header} from &quot;./common/header.jsx&quot;;
  export {default as SearchModal} from &quot;./common/searchModal.jsx&quot;;
  export {default as SignModal} from &quot;./common/signModal.jsx&quot;;
  </code></pre>
  <p>header.jsx</p>
  <pre><code>import React, {useState} from &quot;react&quot;;
  import Button from &quot;@material/react-button&quot;;
  
  import {SearchModal, SignModal} from &quot;../&quot;;
  
  const Header = (props) =&gt; {
  
      const [searchOpen, setSearchOpen] = useState(false);
      const [signOpen, setSignOpen] = useState(false);
  
      const handleSearchOpen = () =&gt; {
          setSearchOpen(true);
      };
  
      const handleSignOpen = () =&gt; {
          setSignOpen(true);
      };
  
      const handleClose = () =&gt; {
          setSearchOpen(false);
          setSignOpen(false);
      };
  
      return(
          &lt;div&gt;
              &lt;Button raised onClick={props.handleSearchOpen}&gt;
                  Search
              &lt;/Button&gt;
              &lt;SearchModal open={searchOpen} handleClose={() =&gt; setSearchOpen(false)}/&gt;
              &lt;Button raised onClick={props.handleSignOpen}&gt;
                  Sign in - up
              &lt;/Button&gt;
              &lt;SignModal open={signOpen} handleClose={() =&gt; setSignOpen(false)}/&gt;
          &lt;/div&gt;
      );
  </code></pre>
  <p>signModal.jsx</p>
  <pre><code>import React from &quot;react&quot;;
  import Button from &quot;@material/react-button&quot;;
  
  import Dialog from &quot;@material-ui/core/Dialog&quot;;
  import DialogActions from &quot;@material-ui/core/DialogActions&quot;;
  import DialogContent from &quot;@material-ui/core/DialogContent&quot;;
  import DialogContentText from &quot;@material-ui/core/DialogContentText&quot;;
  import DialogTitle from &quot;@material-ui/core/DialogTitle&quot;;
  import TextField from &quot;@material-ui/core/TextField&quot;;
  
  const SignModal = (props) =&gt; {
      return(
          &lt;Dialog
              open={props.signOpen}
              onClose={props.handleClose}
              aria-labelledby=&quot;signModalTitle&quot;
              aria-describedby=&quot;signModalDescription&quot;
          &gt;
              &lt;DialogTitle id=&quot;dialog&quot;&gt;{&quot;title&quot;}&lt;/DialogTitle&gt;
              &lt;DialogContent&gt;
              &lt;DialogContentText id=&quot;signModalDescription&quot;&gt;
                  modal description
              &lt;/DialogContentText&gt;
              &lt;TextField
              required
              id=&quot;signEmail&quot;
              label=&quot;Username or email&quot;
              placeholder=&quot;Required&quot;
              variant=&quot;outlined&quot;
              data-owner=&quot;signModal&quot;
              autoFocus
              /&gt;
              &lt;TextField
              required
              id=&quot;signPassword&quot;
              label=&quot;Password&quot;
              type=&quot;password&quot;
              autoComplete=&quot;current-password&quot;
              placeholder=&quot;Required&quot;
              variant=&quot;outlined&quot;
              data-owner=&quot;signModal&quot;
              /&gt;
              &lt;/DialogContent&gt;
              &lt;DialogActions&gt;
              &lt;Button raised onClick={props.handleClose}&gt;
                  Continue
              &lt;/Button&gt;
              &lt;/DialogActions&gt;
          &lt;/Dialog&gt;
      );
  }
  
  export default SignModal
  </code></pre>
  <p><code>searchModal.jsx</code> is basically the same with <code>signModal.jsx</code>, but with different items and design.</p>
  <p>I'm not sure where I'm wrong, any suggestion is appreciated.</p>