How use dialog in react with materal-iu

Question

i need use a dialog confirmation with react-material-ui, but It doesn't work this is the error:

Error: MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object

This my code:

import React from 'react';
import ReactDom from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';
import ActionFace from 'material-ui/svg-icons/action/face';
import CommunicationVpnKey from 'material-ui/svg-icons/communication/vpn-key';


const style = {
  margin: 5
};
const iconStyles = {
  marginRight: 5,
};
export default class DialogExampleSimple extends React.Component  {
  state = {
    open: false,
  };

  handleOpen = () => {
    this.setState({open: true});
  };

  handleClose = () => {
    this.setState({open: false});
    console.log(this.context);
  };

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        keyboardFocused={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <div>
        <RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
          The actions in this window were passed in as an array of React objects.
        </Dialog>
      </div>
    );
  }
}


class App extends React.Component {

    render() {
    return (

        <MuiThemeProvider>
        <Card shadow={0} style={{width: '550px',margin: 'auto'}}>

            <CardMedia
          overlay={<CardTitle title="ssa.net" subtitle="Inicio de sesion" />}
            >
            <img  src="{% static 'src/img/ttr.jpg' %}" height="250px" />
            </CardMedia>
            <CardText>
                <div>
                <ActionFace style={iconStyles} />
                <TextField
                hintText="Ingrese su codigo"
                floatingLabelText="Codigo de acceso"
                fullWidth={false}
                />
                </div>
                <div>
                <CommunicationVpnKey style={iconStyles} />
                <TextField
                hintText="Ingrese su clave"
                floatingLabelText="Clave de acceso"
                type="password"
                fullWidth={false}
                /></div>
              </CardText>
             <CardActions>
                  <FlatButton label="Acceder"  primary={true} style={style}/>
                  <FlatButton label="Registro"  primary={true} style={style} />
                  <FlatButton label="Olvide mi acceso" secondary={true} style={style}/>
             </CardActions>
             </Card>
              <DialogExampleSimple />
      </MuiThemeProvider>
        );
    }
}

ReactDom.render(<App/>,document.getElementById('app'));

Answer 1

MuiThemeProvider can have only child, you can not render more than one element, so instead of using MuiThemeProvider in App component, render the main component (App in your case) inside MuiThemeProvider.

Use this:

ReactDom.render(<MuiThemeProvider>
                    <App/> 
                <MuiThemeProvider/>,
                document.getElementById('app')
);

And remove the <MuiThemeProvider> tag from App component, Use this code for App component:

class App extends React.Component {
  render() {
    return (
      <div>
        <Card shadow={0} style={{width: '550px',margin: 'auto'}}>

            <CardMedia
              overlay={<CardTitle title="ssa.net" subtitle="Inicio de sesion" />}
            >
              <img  src="{% static 'src/img/ttr.jpg' %}" height="250px" />
            </CardMedia>
            <CardText>
                <div>
                <ActionFace style={iconStyles} />
                <TextField
                hintText="Ingrese su codigo"
                floatingLabelText="Codigo de acceso"
                fullWidth={false}
                />
                </div>
                <div>
                <CommunicationVpnKey style={iconStyles} />
                <TextField
                hintText="Ingrese su clave"
                floatingLabelText="Clave de acceso"
                type="password"
                fullWidth={false}
                /></div>
            </CardText>
            <CardActions>
                  <FlatButton label="Acceder"  primary={true} style={style}/>
                  <FlatButton label="Registro"  primary={true} style={style} />
                  <FlatButton label="Olvide mi acceso" secondary={true} style={style}/>
            </CardActions>
          </Card>
          <DialogExampleSimple />
        </div>
      );
    }
}

Answer 2

<MuiThemeProvider> needs to have only one child element, and in your case it has two - a <Card> and a <DialogExampleSimple />.

If you want to render them both, you need to wrap them in a parent component like a <div>