title: How to make the contents of a React Material-UI Drawer run regardless of whether drawer is opened or closed?
body: <p>I am building a React app with a Chat feature.  The chat feature sits in a <a href="https://material-ui.com/components/drawers/" rel="nofollow noreferrer">Material-UI Drawer</a> that toggles open or closed when the chat icon is clicked on.  </p>
  
  <p>The issue I am running into is that the Chat app initiates each time the Drawer is opened and is killed when the drawer is closed.  So every time the user clicks the Chat icon to join a chat they join it as if it's the first time each time.</p>
  
  <p>Instead, I would like the chat code to run and remain running regardless of whether the drawer is opened or closed.</p>
  
  <p>Here is the code.</p>
  
  <pre><code>import React from 'react';
  import './Chat.css';
  import Drawer from '@material-ui/core/Drawer';
  import ChatIcon from '@material-ui/icons/Chat';
  import Card from '@material-ui/core/Card';
  import CardContent from '@material-ui/core/CardContent';
  import Typography from '@material-ui/core/Typography';
  import ChevronRightIcon from '@material-ui/icons/ChevronRight';
  import Tooltip from '@material-ui/core/Tooltip';
  import App from './App/App';
  import Cookies from 'universal-cookie';
  
  type Anchor = 'right';
  
  // SegmentIO tracking
  declare global {
      interface Window { analytics: any; }
  }
  
  export default function Chat() {
      const [state, setState] = React.useState({
          right: false,
      });
  
      const toggleDrawer = (anchor: Anchor, open: boolean) =&gt; (
          event: React.KeyboardEvent | React.MouseEvent,
      ) =&gt; {
          if (
              event.type === 'keydown' &amp;&amp;
              ((event as React.KeyboardEvent).key === 'Tab' ||
                  (event as React.KeyboardEvent).key === 'Shift')
          ) {
              return;
          }
  
          //SegmentIO Tracking
          const cookieMgr = new Cookies();
          var identity = cookieMgr.get('identity');
          var room = cookieMgr.get('room');
  
          if (open) {
              window.analytics.page('Chat');
              window.analytics.track('User opened Chat', {
                  identity: identity,
                  name: room
              });
          } else {
              window.analytics.track('User closed Chat', {
                  identity: identity,
                  name: room
              });
          }
  
          setState({ ...state, [anchor]: open });
      };
  
  
      return (
          &lt;div&gt;
              {(['right'] as Anchor[]).map(anchor =&gt; (
                  &lt;React.Fragment key={anchor}&gt;
                      &lt;Tooltip title="Chat"&gt;
                          &lt;ChatIcon onClick={toggleDrawer(anchor, true)} className="ChatIcon" /&gt;
                      &lt;/Tooltip&gt;
                      &lt;Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}&gt;
                          &lt;Card className="rootChat"&gt;
                              &lt;CardContent&gt;
                                  &lt;Typography className="titleChat" gutterBottom&gt;
                                      &lt;div className="titleContainerChat"&gt;&lt;ChatIcon fontSize="large" className="titleIconChat" /&gt; Chat&lt;/div&gt;
                                      &lt;div className="buttonContainerChat" &gt;
                                          &lt;Tooltip title="Close"&gt;&lt;ChevronRightIcon fontSize="large" className="iconCancelChat" onClick={toggleDrawer(anchor, false)} /&gt;&lt;/Tooltip&gt;
                                      &lt;/div&gt;
                                  &lt;/Typography&gt;
                                  &lt;App /&gt;
                              &lt;/CardContent&gt;
                          &lt;/Card&gt;
                      &lt;/Drawer&gt;
                  &lt;/React.Fragment&gt;
              ))}
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Here is a screenshot of what happens each time you click the chat icon and open the drawer:</p>
  
  <p><a href="https://i.stack.imgur.com/Jdust.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jdust.png" alt="enter image description here"></a></p>