index.js

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import ReactDOM from 'react-dom'
import React, { Component } from 'react';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Dialog from '@material-ui/core/Dialog';
import CloseIcon from '@material-ui/icons/Close';

class FullScreenDialog extends Component {
    
    constructor(props) {
	super(props);
	this.state = {};
	this.state.isOpen = props.isOpen;
    }

    handleClickOpen = () => {
	this.setState({ isOpen: true });
    };

    componentWillReceiveProps(nextProps) {
	this.setState( { isOpen: nextProps.isOpen } );
    }
    
    handleClose = () => {
	this.setState({ isOpen: false });
    };

    render() {
	return (
	    <Dialog fullScreen open={this.state.isOpen} onClose={this.handleClose}>
	    <AppBar >
	    <Toolbar>
	    <IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
	    <CloseIcon />
	    </IconButton>
	    <Typography variant="title" color="inherit" >
	    A dialog
	    </Typography>
	    </Toolbar>
	    </AppBar>
	    <div>
	    { /* Without both of these I don't see the content */ }
	    <h1>The body of the dialog.</h1>
	    <h1>The body of the dialog.</h1>
	    </div>
	    </Dialog>
	);
    }
}

class VerticalLinearStepper extends Component {

    constructor(props) {
	super(props);
	this.state = { noteDialogIsOpen: false, activeStep: 0 };
    }

    getSteps() {
	return ['First step', 'Second step'];
    }
    
    getStepContent(step, doc, query) {
	switch (step) {
	case 0:
	    return (
		<Typography>
	        { this.state.noteDialogIsOpen &&
		    <FullScreenDialog isOpen={this.state.noteDialogIsOpen} query={query} doc={doc}/>
		}
		<Button onClick={this.openNoteDialog}>Open dialog.</Button>
		</Typography>
	    )
	case 1:
	    return "Something or other";
	default:
	    return "Unsure";
	}
    }
    
    openNoteDialog = () => {
	this.setState( { noteDialogIsOpen: true } );
    }

    onClose() {
	this.setState( { noteDialogIsOpen: false } );
    }

    handleNext = () => {
	this.setState({
	    activeStep: this.state.activeStep + 1,
	});
    };

    handleBack = () => {
	this.setState({
	    activeStep: this.state.activeStep - 1,
	});
    };

    handleReset = () => {
	this.setState({
	    activeStep: 0,
	});
    };

    render() {
	const { query, doc } = this.props;
	const steps = this.getSteps();
	const { activeStep } = this.state;

	return (
            <div>
	    <Stepper activeStep={activeStep} orientation="vertical">
	    {steps.map((label, index) => {
		return (
		    <Step key={label}>
		    <StepLabel>{label}</StepLabel>
		    <StepContent>
		    {this.getStepContent(index,doc,query)}
		    <Button disabled={activeStep === 0} onClick={this.handleBack}>Back</Button>
		    <Button onClick={this.handleNext}>
		    {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
		    </Button>
		    </StepContent>
		    </Step>
		);
	    })}
	    </Stepper>
	    {activeStep === steps.length && (
		<Paper square elevation={0} >
		<Typography>All steps completed.</Typography>
		<Button onClick={this.handleReset}>
		Reset
		</Button>
		</Paper>
	    )}
	    </div>
	);
    }
}


ReactDOM.render(
    <div>
<VerticalLinearStepper query="asdasdasd" doc="asdadasdsa"/>
</div>,
  document.getElementById('react-container')
);