Slide Material-UI cannot read property style of "undefined"

user_10259848 0
Viewed 3897

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:

{selectedItem && selectedItem.modal && selectedItem.modal.body ? (
    selectedItem.modal.body.map((section, key) => (
      <Section section={section} key={key} />
    ))
  ) : (
    <Slide
      direction={animate === 'stepIn' ? 'right' : 'left'}
      in={animate === 'idle'}
    >
      <Grid container={true} spacing={3}>
        {items.map((item, key) => (
          <Grid item={true} xs={6} md={4} lg={3} key={key}>
            <MaterialCard
              key={key}
              onClick={onCardClicked(item)}
              className={classes.card}
            >
              <CardActionArea className={classes.cardArea}>
                <CardMedia
                  image={item.image || undefined}
                  component="img"
                />

                <CardContent className={classes.cardContent}>
                  <Typography
                    component="p"
                    className={classes.cardContentTypographyHeader}
                  >
                    <Hyphenated language={de}>{item.label}</Hyphenated>
                  </Typography>

                  {item.description ? (
                    <Typography
                      component="p"
                      className={classes.cardContentTypography}
                    >
                      <Hyphenated language={de}>
                        {item.description}
                      </Hyphenated>
                    </Typography>
                  ) : null}
                </CardContent>
              </CardActionArea>

              {selectedItem && selectedItem.id === item.id ? (
                <>
                  <div className={classes.cardSelectedOverlay} />
                  <Done className={classes.cardSelectedOverlayIcon} />
                </>
              ) : null}
            </MaterialCard>
          </Grid>
        ))}
      </Grid>
    </Slide>

But fails to compile when I move the section.map inside the slide. I want to animate the section coming in aswell.

<Slide
    direction={animate === 'stepIn' ? 'right' : 'left'}
    in={animate === 'idle'}
  >
    {selectedItem && selectedItem.modal && selectedItem.modal.body ? (
      selectedItem.modal.body.map((section, key) => (
        <Section section={section} key={key} />
      ))
    ) : (
      <Grid container={true} spacing={3}>
        {items.map((item, key) => (
          <Grid item={true} xs={6} md={4} lg={3} key={key}>
            <MaterialCard
              key={key}
              onClick={onCardClicked(item)}
              className={classes.card}
            >
              <CardActionArea className={classes.cardArea}>
                <CardMedia
                  image={item.image || undefined}
                  component="img"
                />

                <CardContent className={classes.cardContent}>
                  <Typography
                    component="p"
                    className={classes.cardContentTypographyHeader}
                  >
                    <Hyphenated language={de}>{item.label}</Hyphenated>
                  </Typography>

                  {item.description ? (
                    <Typography
                      component="p"
                      className={classes.cardContentTypography}
                    >
                      <Hyphenated language={de}>
                        {item.description}
                      </Hyphenated>
                    </Typography>
                  ) : null}
                </CardContent>
              </CardActionArea>

              {selectedItem && selectedItem.id === item.id ? (
                <>
                  <div className={classes.cardSelectedOverlay} />
                  <Done className={classes.cardSelectedOverlayIcon} />
                </>
              ) : null}
            </MaterialCard>
          </Grid>
        ))}
      </Grid>
    )}
  </Slide>

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:

Error Message

Thanks for your help!

material-ui typescript reactjs
1 Answers

In the documentation for Slide's children prop you can find:

A single child content element.

⚠️ Needs to be able to hold a ref.

Slide uses React.cloneElement to add a ref and props to the single child. If there are multiple children or if children is an array (even if the array contains only one child), then Slide will get the error you encountered because children.props is not defined and it is trying to reference children.props.style.

Below is a little example to just help better understand the cause of the error:

import React from "react";
import ReactDOM from "react-dom";

const MockSlide = ({ children }) => {
  if (children.props) {
    return (
      <div>
        {children}
        children.props is defined
      </div>
    );
  }
  return (
    <div>
      {children}
      children.props is not defined
    </div>
  );
};
const sectionArray = [
  "An array also causes problems (even if only one element)"
];
function App() {
  return (
    <div className="App">
      <MockSlide>
        <div>Single child works fine</div>
      </MockSlide>
      <br />
      <br />
      <MockSlide>
        <div>Multiple children</div>
        <div>causes problems with Slide</div>
      </MockSlide>
      <br />
      <br />
      <MockSlide>
        {sectionArray.map(section => {
          return <div>{section}</div>;
        })}
      </MockSlide>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit Slide single child requirement

One potential solution is to wrap everything inside the Slide in a single <div> element.

user_74959300
Related