Faded Cards in material-ui crashing web application raising element type is invalid expected a string error

Question

I've looked at a lot of similar SO questions, and it seems to be an issue with imports every time. It's always a combination of the import destination not being typed correctly or needing braces, and I have none of those problems.

This is the exact error that's happening when my page looks like this, and you can check my imports which I'm 99% sure are done correctly:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Cookies from 'js-cookie';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import Fade from '@material-ui/core/Fade';
import Button from '@material-ui/core/Button';
import BottomBar from "../components/BottomBar";
import CardContent from "@material-ui/core/CardContent";

...

    render() {
        const { classes } = this.props;
        const loading = this.state.loading;
        // console.log(!loading)
        return (

            <form className={classes.container} noValidate autoComplete="off">
                <Fade
                    in={true}
                    unmountOnExit
                    >
                    <CardContent>
                        <TextField
                            id="numSentences"
                            label="Number of Sentences"
                            className={classes.TextField}
                            value={this.state.numSentences}
                            onChange={this.handleChange('numSentences')}
                            margin="normal"
                            required={true}
                            error={this.state.error}
                        />
                    </CardContent>
                    <TextField
                        id="text"
                        label="Raw Text Input"
                        className={classes.textField}
                        value={this.state.text}
                        onChange={this.handleChange('text')}
                        margin="normal"
                        error={this.state.error}
                        multiline={true}
                        fullWidth={true}
                        rows="30"
                    />
                    <Card>
                        <CardActions>
                            <Button size="large"
                                    fullWidth={true}
                                    onClick={this.handleClickLoading}>Submit</Button>
                        </CardActions>
                    </Card>
                </Fade>
            </form>
        );
    }
}

When I take out the Fade and insert a Faded loading bar at the bottom (under < /Card>, before < /form>):

            <Fade
                in={loading}
                unmountOnExit
            >
                <BottomBar/>
            </Fade>

the page runs perfectly fine, which in my eyes means my Fade import is fine. I can Fade outside of the form component or fade a loading bar inside the form, but fading cards is crashing my webapp. Anyone know why?

The full repository is linked here, if you're curious.

Faded Documentation

Answer 1

Seem's like the Fade component only accepts one child where as you are passing it several. Instead try returning the following:

return (

        <form className={classes.container} noValidate autoComplete="off">
            <Fade
                in={true}
                unmountOnExit
                >
                <React.Fragement>
                <CardContent>
                    <TextField
                        id="numSentences"
                        label="Number of Sentences"
                        className={classes.TextField}
                        value={this.state.numSentences}
                        onChange={this.handleChange('numSentences')}
                        margin="normal"
                        required={true}
                        error={this.state.error}
                    />
                </CardContent>
                <TextField
                    id="text"
                    label="Raw Text Input"
                    className={classes.textField}
                    value={this.state.text}
                    onChange={this.handleChange('text')}
                    margin="normal"
                    error={this.state.error}
                    multiline={true}
                    fullWidth={true}
                    rows="30"
                />
                <Card>
                    <CardActions>
                        <Button size="large"
                                fullWidth={true}
                                onClick={this.handleClickLoading}>Submit</Button>
                    </CardActions>
                </Card>
                </React.Fragement>
            </Fade>
        </form>
    );

This way only one child is passed in to the Fade component (and that's React.Fragement)