title: Slide Material-UI cannot read property style of "undefined"
body: <p>I have implemented Material-UI Slide in my project recently and wanted to ask if someone could explain to me why the code works when I write it this way:</p>
  
  <pre><code>{selectedItem &amp;&amp; selectedItem.modal &amp;&amp; selectedItem.modal.body ? (
      selectedItem.modal.body.map((section, key) =&gt; (
        &lt;Section section={section} key={key} /&gt;
      ))
    ) : (
      &lt;Slide
        direction={animate === 'stepIn' ? 'right' : 'left'}
        in={animate === 'idle'}
      &gt;
        &lt;Grid container={true} spacing={3}&gt;
          {items.map((item, key) =&gt; (
            &lt;Grid item={true} xs={6} md={4} lg={3} key={key}&gt;
              &lt;MaterialCard
                key={key}
                onClick={onCardClicked(item)}
                className={classes.card}
              &gt;
                &lt;CardActionArea className={classes.cardArea}&gt;
                  &lt;CardMedia
                    image={item.image || undefined}
                    component="img"
                  /&gt;
  
                  &lt;CardContent className={classes.cardContent}&gt;
                    &lt;Typography
                      component="p"
                      className={classes.cardContentTypographyHeader}
                    &gt;
                      &lt;Hyphenated language={de}&gt;{item.label}&lt;/Hyphenated&gt;
                    &lt;/Typography&gt;
  
                    {item.description ? (
                      &lt;Typography
                        component="p"
                        className={classes.cardContentTypography}
                      &gt;
                        &lt;Hyphenated language={de}&gt;
                          {item.description}
                        &lt;/Hyphenated&gt;
                      &lt;/Typography&gt;
                    ) : null}
                  &lt;/CardContent&gt;
                &lt;/CardActionArea&gt;
  
                {selectedItem &amp;&amp; selectedItem.id === item.id ? (
                  &lt;&gt;
                    &lt;div className={classes.cardSelectedOverlay} /&gt;
                    &lt;Done className={classes.cardSelectedOverlayIcon} /&gt;
                  &lt;/&gt;
                ) : null}
              &lt;/MaterialCard&gt;
            &lt;/Grid&gt;
          ))}
        &lt;/Grid&gt;
      &lt;/Slide&gt;
  </code></pre>
  
  <p>But fails to compile when I move the section.map inside the slide. I want to animate the section coming in aswell.</p>
  
  <pre><code>&lt;Slide
      direction={animate === 'stepIn' ? 'right' : 'left'}
      in={animate === 'idle'}
    &gt;
      {selectedItem &amp;&amp; selectedItem.modal &amp;&amp; selectedItem.modal.body ? (
        selectedItem.modal.body.map((section, key) =&gt; (
          &lt;Section section={section} key={key} /&gt;
        ))
      ) : (
        &lt;Grid container={true} spacing={3}&gt;
          {items.map((item, key) =&gt; (
            &lt;Grid item={true} xs={6} md={4} lg={3} key={key}&gt;
              &lt;MaterialCard
                key={key}
                onClick={onCardClicked(item)}
                className={classes.card}
              &gt;
                &lt;CardActionArea className={classes.cardArea}&gt;
                  &lt;CardMedia
                    image={item.image || undefined}
                    component="img"
                  /&gt;
  
                  &lt;CardContent className={classes.cardContent}&gt;
                    &lt;Typography
                      component="p"
                      className={classes.cardContentTypographyHeader}
                    &gt;
                      &lt;Hyphenated language={de}&gt;{item.label}&lt;/Hyphenated&gt;
                    &lt;/Typography&gt;
  
                    {item.description ? (
                      &lt;Typography
                        component="p"
                        className={classes.cardContentTypography}
                      &gt;
                        &lt;Hyphenated language={de}&gt;
                          {item.description}
                        &lt;/Hyphenated&gt;
                      &lt;/Typography&gt;
                    ) : null}
                  &lt;/CardContent&gt;
                &lt;/CardActionArea&gt;
  
                {selectedItem &amp;&amp; selectedItem.id === item.id ? (
                  &lt;&gt;
                    &lt;div className={classes.cardSelectedOverlay} /&gt;
                    &lt;Done className={classes.cardSelectedOverlayIcon} /&gt;
                  &lt;/&gt;
                ) : null}
              &lt;/MaterialCard&gt;
            &lt;/Grid&gt;
          ))}
        &lt;/Grid&gt;
      )}
    &lt;/Slide&gt;
  </code></pre>
  
  <p>The code works for every card, except the ones with a modal inside them. A modal contains e.g. text, textinput. When I click on a card with a modal inside of it i get this error:</p>
  
  <p><a href="https://i.stack.imgur.com/TcwSM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TcwSM.png" alt="Error Message"></a></p>
  
  <p>Thanks for your help!</p>