Can't get my component to conditionally render out - reactjs

Question

I have a few different const functions I would like to return and render. I have it set to always render out the Main menu unless a button is pressed, which updates my state to the name of the button. Each button name has another set of buttons that it should render out (exactly like main menu), but I can't get them to render out.
My current code renders the main menu and when a button is selected instead of rendering out a new line of buttons, it renders out just the name of the button selected. I would like my conditional to render out the state name component if possible.
this.state.selected is only rendering out a String. I would like to incase it in maybe...
<this.state.selected />
However, this doesn't work.
return (
<div>
{this.state.selected === '' ? <MainMenu /> : this.state.selected }
</div>
)
EDIT - Adding all of the code for more information
import React, { Component } from 'react'
import SearchBar from 'material-ui-search-bar'
import sass from '../scss/application.scss'
import PropTypes from 'prop-types'
import RaisedButton from 'material-ui/RaisedButton'
class OverviewRender extends Component {
constructor(props) {
super(props);
this.state = {
selected: ''
}
}
handleClick(name) {
this.setState({
selected: name
});
console.log("testing" + this.state.selected);
}
render() {
const MainMenu = () => (
<div>
<RaisedButton
label="File Options"
onClick={this.handleClick.bind(this, 'FileOptions')}
style={{
height: '80px',
width: '180px',
fontSize: '44px',
padding: '1px'
}}
/>
<RaisedButton
label="Setup Options"
style={{
height: '80px',
width: '180px',
fontSize: '44px',
padding: '1px'
}}
/>
<RaisedButton
label="More Options"
style={{
height: '80px',
width: '180px',
fontSize: '44px',
padding: '1px'
}}
/>
<RaisedButton
label="Shift Setup"
style={{
height: '80px',
width: '180px',
fontSize: '44px',
padding: '1px'
}}
/> <br />
<RaisedButton
label="View/Report"
style={{
height: '80px',
width: '180px',
fontSize: '44px',
padding: '1px'
}}
/>
<RaisedButton
label="Troubleshooting"
style={{
height: '80px',
width: '180px',
fontSize: '44px',
padding: '1px'
}}
/>
</div>
);
const FileOptions = () => (
<div>
<RaisedButton
label="Load Values"
style={{
height: '80px',
width: '180px',
fontSize: '44px',
padding: '1px'
}}
/>
<RaisedButton
label="Open Values From Disk"
style={{
height: '80px',
width: '180px',
fontSize: '44px',
padding: '1px'
}}
/>
</div>
);
const { Selected } = this.state;
return (
<div>
{Selected === '' ? <MainMenu /> : <Selected />}
</div>
)
}
}
class Overview extends Component {
constructor(props){
super(props)
this.state = {
open: false
}
}
render() {
return (
<div className="menuButtons">
<br />
<OverviewRender />
</div>
)
}
}
export default Overview;

Answer 1

the best way if you could do this in your code
class Container extends React.Component {
constructor () {
super();
this.state = { Selected: null }
}
render () {
const { Selected } = this.state
return (
<div>
{Selected === '' ? <MainMenu /> : <Selected /> }
</div>
)
}
}
you must know that React will only render if follow its convention name. See again above
edit to reflect updated question above
import React, { Component } from 'react'
import SearchBar from 'material-ui-search-bar'
import sass from '../scss/application.scss'
import PropTypes from 'prop-types'
import RaisedButton from 'material-ui/RaisedButton'
const FileOptions = () => (
<div>
<RaisedButton label="Load Values" style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px'}} />
<RaisedButton label="Open Values From Disk" style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px'}} />
</div>
);
class OverviewRender extends Component {
constructor(props) {
super(props);
this.state = {
Selected: null
}
}
handleClick(name) {
this.setState({
Selected: name
});
console.log("testing" + this.state.Selected);
}
MainMenu = () => (
<div>
<RaisedButton label="File Options" onClick={() => this.setState({ Selected: FileOptions })} style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px' }} />
<RaisedButton label="Setup Options" style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px'}} />
<RaisedButton label="More Options" style={{height: '80px',width: '180px',fontSize: '44px',padding: '1px'}} />
<RaisedButton label="Shift Setup" style={{height: '80px',width: '180px',fontSize: '44px',padding: '1px'}} />
<br />
<RaisedButton label="View/Report" style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px' }} />
<RaisedButton label="Troubleshooting" style={{ height: '80px', width: '180px', fontSize: '44px', padding: '1px'}} />
</div>
)
render() {
const { Selected } = this.state;
return (
<div>
{this.MainMenu()}
{Selected === '' ? <MainMenu /> : <Selected />}
</div>
)
}
}
check again its initial state.

Answer 2

If this.state.selected is a string containing the component name, then I think this should work:
let SelectedComponent = this.state.selected;
return <div>{SelectedComponent ? <SelectedComponent /> : <MainMenu />}</div>;
The name of the variable containing the component must be capitalized. For more info see https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components