ReactJS - Rendering a specific component based on scenario - reactjs

Question

I'm trying to render a specific component based on stage scenario of the page. I'm using a varriable "transitComponent" to render one of three components - a circular progress (wait) or one of two buttons once the response is received.
Any suggestions?
render() {
const { classes } = this.props;
if (this.state.stage==1){ transitComponent = CircularProgress};
if (this.state.stage==2){ transitComponent = CancelButton };
if (this.state.stage==3){ transitComponent = OKButton };
return (
<div align="center">
<br />
<Button align="center" variant="contained" color="primary" onClick= {this.handleOpen}>Create Profile</Button>
<Modal aria-labelledby="simple-modal-title" aria-describedby="simple- modal-description" open={this.state.open} onClose={this.handleClose}>
<div style={getModalStyle()} className={classes.paper}>
<Typography variant="title" id="modal-title" align="center">
{this.state.message}
</Typography>
{transitComponent}
</div>
</Modal>
</div>
);
}

Answer 1

You are assigning CircularProgress, CancelButton or OKButton to a temporary variable transitComponent, depending on the current state.stage. That's OK, the only part you got wrong is how you render that component.
Since transitComponent is a component like any other, you don't render it with curly braces, but as a component, so <transitComponent /> would be the proper way.
One more thing: Since React naming convention requires you to name components capitalized, you should name it TransitComponent and render it as <TransitComponent />.
And don't forget to declare TransitComponent with a let statement!
Updated code example:
render() {
const { classes } = this.props;
let TransitComponent;
if (this.state.stage==1){ TransitComponent = CircularProgress};
if (this.state.stage==2){ TransitComponent = CancelButton };
if (this.state.stage==3){ TransitComponent = OKButton };
return (
<div align="center">
<br />
<Button align="center" variant="contained" color="primary" onClick={this.handleOpen}>Create Profile</Button>
<Modal aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" open={this.state.open} onClose={this.handleClose}>
<div style={getModalStyle()} className={classes.paper}>
<Typography variant="title" id="modal-title" align="center">
{this.state.message}
</Typography>
<TransitComponent />
</div>
</Modal>
</div>
);
}