Hope this one can help you!
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const LeftMenu = (props) => (
<button onClick={props.toggleComponents}>LeftMenu</button>
);
const Tiles = () => <div>Tiles</div>;
const AnotherComponent = () => <div>AnotherComponent</div>;
class Main extends React.Component{
state ={
isShowTiles:true
};
render(){
return(
<div>
<LeftMenu toggleComponents={this.toggleComponents}/>
<div class="toggleArea">
{
this.state.isShowTiles
? <Tiles />
: <AnotherComponent/>
}
</div>
</div>
);
}
toggleComponents=()=>{
this.setState({
isShowTiles:!this.state.isShowTiles
})
}
}
ReactDOM.render(<Main/>, document.getElementById("root"));
<!-- language: lang-css -->
.toggleArea{
margin:10px;
padding:10px;
border:5px solid red;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<!-- end snippet -->
this example shows how you can switch between components by using a toggle which switches after every 1sec
import React ,{Fragment,Component} from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const Component1 = () =>(
<div>
<img
src="https://i.pinimg.com/originals/58/df/1d/58df1d8bf372ade04781b8d4b2549ee6.jpg" />
</div>
)
const Component2 = () => {
return (
<div>
<img
src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/2/2e/12ccse.jpg/250px-
12ccse.jpg" />
</div>
)
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
toggleFlag:false
}
}
timer=()=> {
this.setState({toggleFlag:!this.state.toggleFlag})
}
componentDidMount() {
setInterval(this.timer, 1000);
}
render(){
let { toggleFlag} = this.state
return (
<Fragment>
{toggleFlag ? <Component1 /> : <Component2 />}
</Fragment>
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
