I'm trying to use transitions within my react app, but each time I try to use any transition module this error es up: "TypeError: Cannot read property 'style' of undefined",

(anonymous function) node_modules/@material-ui/core/esm/Fade/Fade.js:83

  80 |     style: _extends({
  81 |       opacity: 0,
  82 |       visibility: state === 'exited' && !inProp ? 'hidden' : undefined
> 83 |     }, styles[state], style, children.props.style),
     | ^  84 |     ref: handleRef
  85 |   }, childProps));
  86 | });

I've tried not using es6 class style method, which actually fixes the problem, but I want to use es6 classes.

I think it has something to do with the styles variable which I define at the top like so:

const styles = theme => ({
    typography: {
        marginTop: theme.spacing(2)
    }
});

class IndexPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false,
        }
    }

    render() {
        const {classes} = this.props;

        return (
            <React.Fragment>
                <Typography className={classes.typography} align={"center"} variant={"h2"} ponent={"h2"}>
                    <Fade in={this.state.checked}>
                        Wele to my Portfolio!
                    </Fade>
                </Typography>
            </React.Fragment>
        )
    }
}

IndexPage.propTypes = {
    styles: PropTypes.object.isRequired,
};

export default withStyles(styles)(IndexPage);

I expect the text inside the typography tag to Fade in, but the App crashes.

I'm trying to use transitions within my react app, but each time I try to use any transition module this error es up: "TypeError: Cannot read property 'style' of undefined",

(anonymous function) node_modules/@material-ui/core/esm/Fade/Fade.js:83

  80 |     style: _extends({
  81 |       opacity: 0,
  82 |       visibility: state === 'exited' && !inProp ? 'hidden' : undefined
> 83 |     }, styles[state], style, children.props.style),
     | ^  84 |     ref: handleRef
  85 |   }, childProps));
  86 | });

I've tried not using es6 class style method, which actually fixes the problem, but I want to use es6 classes.

I think it has something to do with the styles variable which I define at the top like so:

const styles = theme => ({
    typography: {
        marginTop: theme.spacing(2)
    }
});

class IndexPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false,
        }
    }

    render() {
        const {classes} = this.props;

        return (
            <React.Fragment>
                <Typography className={classes.typography} align={"center"} variant={"h2"} ponent={"h2"}>
                    <Fade in={this.state.checked}>
                        Wele to my Portfolio!
                    </Fade>
                </Typography>
            </React.Fragment>
        )
    }
}

IndexPage.propTypes = {
    styles: PropTypes.object.isRequired,
};

export default withStyles(styles)(IndexPage);

I expect the text inside the typography tag to Fade in, but the App crashes.

• javascript
• reactjs
• material-ui

• 4 I think the transition expects one child ponent. Happened to me when I try to fade in multiple divs – Taylor A. Leach Commented Jan 28, 2020 at 16:23

1 Answer 1

Fade the Typography ponent:

<React.Fragment>
  <Fade in={this.state.checked}>
    <Typography
      className={classes.typography}
      align={"center"}
      variant={"h2"}
      ponent={"h2"}
    >
      Wele to my Portfolio!
    </Typography>
  </Fade>
</React.Fragment>;

For example:

export default function App() {
  return (
    <FlexBox>
      <Fade in={true}>
        <Typography>Wele</Typography>
      </Fade>
    </FlexBox>
  );
}