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 -->
The key is to update the state of the component in the click handler using `setState`. When the state changes get applied, the `render` method gets called again with the new state:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
var Search = React.createClass({
getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},
render: function() {
return (
<div>
<input type="submit" value="Search" onClick={this.onClick} />
{ this.state.showResults ? <Results /> : null }
</div>
);
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
ReactDOM.render( <Search /> , document.getElementById('container'));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<!-- end snippet -->
[JSFiddle][1]
[1]: http://jsfiddle.net/kb3gN/15084/
