title: Redux- 'props' undefined using compose
body: <p>I am a beginner with react. I get an error like this: </p>
  
  <blockquote>
    <p>TypeError: Cannot set property 'props' of undefined</p>
  </blockquote>
  
  <p>if I delete this code the props will work :</p>
  
  <pre><code>export default compose(
      withStyles(styles,{name:'MainLayout'}),
      connect(mapStateToProps,{logoutAdmin})
      (MainLayout));
  </code></pre>
  
  <p>replace this code with this:</p>
  
  <pre><code>export default withStyles(styles)(MainLayout);
  </code></pre>
  
  <p>is it because the props are not sent? or an error occurred in the code?</p>
  
  <p>sorry I don't understand what I have to do, I have already followed the tutorial and it has been checking for hours and the results are still not working</p>
  
  <p>this is my code :</p>
  
  <pre><code>import React from 'react';
  import compose from 'recompose/compose';
  import { withStyles } from '@material-ui/core/styles';
  import { AppBar, IconButton,Button, Toolbar, Typography, Drawer, List,Paper } from '@material-ui/core';
  import InboxIcon from '@material-ui/icons/Inbox';
  import classNames from 'classnames';
  import MenuIcon from '@material-ui/icons/Menu';
  import FaceIcon from '@material-ui/icons/Face';
  import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
  import { Link } from 'react-router-dom';
  import { mainListItems } from './ListItem.js';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { logoutAdmin } from '../../actions/authActions';
  
  
  const drawerWidth = 260;
  const styles = theme =&gt; ({
      root: {
          display: 'flex',
      },
      drawer: {
          width: drawerWidth,
          flexShrink: 0,
      },
      drawerPaper: {
          whiteSpace: 'nowrap',
          width: drawerWidth,
          flexShrink: 0,
          transition: theme.transitions.create('width', {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.enteringScreen,
          }),
      },
  
      appBar: {
          zIndex: theme.zIndex.drawer + 1, //agar z index MainLayout lebih tinggi dari navbar
          transition: theme.transitions.create(['width', 'margin'], {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
          }),
      },
      appBarShift: {
          marginLeft: drawerWidth,
          width: `calc(100% - ${drawerWidth}px)`,
          transition: theme.transitions.create(['width', 'margin'], {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.enteringScreen,
          }),
      },
      toolbar:theme.mixins.toolbar,
  
      drawerPaperClose: {
          overflowX: 'hidden',
          transition: theme.transitions.create('width', {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
          }),
          width: theme.spacing.unit * 7,
          [theme.breakpoints.up('sm')]: {
              width: theme.spacing.unit * 9,
          },
      },
      content: {
          flexGrow: 1,
          padding: theme.spacing.unit * 5,
          transition: theme.transitions.create('margin', {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
          }),
          marginLeft: -drawerWidth+40,
      },
      contentShift: {
          transition: theme.transitions.create('margin', {
              easing: theme.transitions.easing.easeOut,
              duration: theme.transitions.duration.enteringScreen,
          }),
          marginLeft: 0,
      },
      grow: {
          flexGrow: 1,
      },
  
  });
  
  class MainLayout extends React.Component {
      constructor() {
          super();
          this.state = {
              open: true,
              Menu: [
                  { title: "Dashboard", icon: "DashboardIcon", link: "/" },
                  { title: "Inbox", icon: "MenuIcon", link: "/inbox" },
              ],
          };
      }
      handleDrawerOpen = () =&gt; {
          this.setState({ open: !this.state.open });
      };
      onLogoutClick = () =&gt; {
          this.props.logoutAdmin();
      }
  
  
      render() {
  
          const { classes } = this.props;
          const { open } = this.state;
  
          return (
              &lt;div className={classes.root}&gt;
                  &lt;AppBar position="fixed" className={classes.appBar}  &gt;
                      &lt;Toolbar disableGutters={!this.state.open} className={classes.toolbar} &gt;
  
                          &lt;IconButton className={classes.menuButton} onClick={this.handleDrawerOpen} className={classNames(
                              classes.menuButton,
                              this.state.open &amp;&amp; classes.menuButtonHidden,
                          )} color="inherit" aria-label="Open drawer"&gt;
                              &lt;MenuIcon /&gt;
                          &lt;/IconButton&gt;
                          &lt;Typography variant="h6" color="inherit" noWrap&gt;
                              Bimbingan Konseling
                      &lt;/Typography&gt;
  
                          &lt;div className={classes.grow} /&gt;
                          &lt;Button
                              color="inherit"
                              component={Link} to='/login'
  
                              style={{textTransform:"none"}}
                          &gt;
                              &lt;FaceIcon /&gt;
                              &lt;Typography variant="subtitle1"  color="inherit"  style={{marginLeft:10}}&gt;
                                  Username
                          &lt;/Typography&gt;
                          &lt;/Button&gt;
                          &lt;Button
                              color="inherit"
                              component={Link} to='/login'
  
                              style={{ textTransform: "none" }}
  
                          &gt;
  
                          &lt;PowerSettingsNewIcon /&gt;
                              &lt;Typography variant="subtitle1" color="inherit" onClick={this.onLogoutClick} style={{marginLeft:10}}&gt;
                                  Logout
                          &lt;/Typography&gt;
                          &lt;/Button&gt;
  
  
  
                      &lt;/Toolbar&gt;
                  &lt;/AppBar&gt;
                  &lt;Drawer
                      className={classes.drawerPaper}
                      variant="permanent"
                      classes={{
                          paper: classNames(classes.drawerPaper, !this.state.open &amp;&amp; classes.drawerPaperClose)
                      }}
                  &gt;
                      &lt;div className={classes.toolbar} /&gt;
                      &lt;List &gt;
                          {mainListItems}
                      &lt;/List&gt;
                      &lt;div /&gt;
                  &lt;/Drawer&gt;
                  &lt;main className={classNames(classes.content, {
                      [classes.contentShift]: open,
                  })}&gt;
                  &lt;div style={{marginTop:40}}&gt;
                     {this.props.children}
                  &lt;/div&gt;
  
                  &lt;/main&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  MainLayout.propTypes = {
      classes: PropTypes.object.isRequired,
      logoutAdmin:PropTypes.func.isRequired,
      auth:PropTypes.object.isRequired
  
  };
  
  const mapStateToProps = (state) =&gt; ({
      auth: state.auth
  });
  
  
  // Menggunakan library recompose
  export default compose(
      withStyles(styles,{name:'MainLayout'}),
      connect(mapStateToProps,{logoutAdmin})
      (MainLayout));
  </code></pre>