reactjs - How to dynamically show the component based on the state -

i want create dashboard has sidebar, , sidebar change state.

here how it

my showpage:

showpage(page) {     switch (page) {       case 'feeds':         return <helppage />;       case 'messages':         return <messagespage />;       case 'projects':         return <projectspage />;       case 'support':         return <supportpage />;       case 'about':         return <aboutpage />;       default:         return <dialogpage />;     }   } 

my render method:

how switch page:

handleclick(page) { this.props.pageswitcher(page); }  ... <listitem     primarytext="feeds"     onclick={() => this.handleclick("feeds")} /> 

how call element:

<col xs={6} sm={6} md={6} lg={8}> {     this.showpage(page) } </col> 

my action:

export function pageswitcher(page = '') {   let payload = {};   switch (page) {     case 'feeds':       payload = {         type: types.show_helps_feed,         page,       };       break;     case 'messages':       payload = {         type: types.show_inbox,         page,       };       break;     case 'projects':       payload = {         types: types.show_projects,         page,       };       break;     case 'support':       payload = {         types: types.show_support,         page,       };       break;     case 'about':       payload = {         types: types.show_about,         page,       };       break;     default:       payload = {         types: '',         page,       };   }   return payload; } 

at beginning, loads default component <dialogpage />. after click feeds listitem, not replace <dialogpage /> <helppage />. can see in redux debugging tools calls componentwillmount in helppage.

how can dynamically show component based on state?

thanks!

edit: works if in showpage returns component, if return container won't display anything. because have componentwillmount calls action, , previous state dashboard being replaced. here reducer of container want load:

import * types '../actions/actiontypes';  export default function helpsreducer(state = {   isfetching: false,   items: [], }, action) {   switch (action.type) {     case types.helps_feed_request:       return object.assign({}, state, {         isfetching: true,       });     case types.helps_feed_success:       return object.assign({}, state, {         isfetching: false,         items: [           ...state.items,           ...action.items,         ],       });     default:       return state;   } } 

i have created simple example based on question.

https://jsfiddle.net/69z2wepo/48038/

var child = react.createclass({     renderpage: function (page) {         if (page === 'one') {             return <div>one</div>;         }          return <div>two</div>;     },     handleclick: function (page) {         this.props.switchpage(page);     },     render: function () {         return (             <div>                 <ul>                     <li                          style={{cursor: 'pointer', textdecoration: 'underline'}}                         onclick={() => this.handleclick('one')}                     >                         1                     </li>                     <li                         style={{cursor: 'pointer', textdecoration: 'underline'}}                         onclick={() => this.handleclick('two')}                     >                         2                     </li>                     {this.renderpage(this.props.page)}                 </ul>             </div>         );     } });  var parent = react.createclass({     getinitialstate: function () {         return {page: 'one'};     },     switchpage: function (page) {         this.setstate({page: page});     },     render: function () {         return (             <div>                 <child page={this.state.page} switchpage={this.switchpage}/>             </div>           );     } });  reactdom.render(     <parent />,     document.getelementbyid('container') );