ReactJS baby step -- right way to do nested components

Question

Hi all I am reactJS beginner, currently making tabs using react-mdl. tabs panel are not routes. and can be routes. problem

export default class content extends Component {
  constructor(props){
    super(pops);
    this.state={tabID:0,tabDataVerify:false}
  }

  render() {
    let tabNextContent =  <CreateTabContent />; // init the 1st tab panel

    //when tab click, tabId provided, select the correct panel to dispaly (mount)
    let tabDataProcess = (tabId) => {
  if(tabId === 0){
        tabNextContent = <CreateTabContent />;
      }else if(tabId ===1){
        tabNextContent = <PlanTabContent />;
      }else if(tabId === 2){
        tabNextContent = <TodoTabContent />;
      }else if(tabId === 3){
        tabNextContent = <ShopTabContent />;
      }else if(tabId === 4){
        tabNextContent = <SubmitTabContent />;
      }
      return tabNextContent;
    };
    return (
      <div className="container">

        <Tabs
          activeTab={0}
              onChange={(tabId) => {tabDataProcess(tabId)} ripple >
          <Tab>Create</Tab>
          <Tab>plan</Tab>
          <Tab>Todo</Tab>
          <Tab>Shop</Tab>
          <Tab>submit</Tab>
        </Tabs>
        <section>
          <div  className="content">
         { tabNextContent }
          </div>
        </section>
        <br/>

all other files are like this

export default class CreateTabContent extends Component {
  render() {
    return (
      <h1>Create</h1>
    );
  }
}

i can run those code, console.logs are ok for inside the if block. but the tab panels are not updating, may be i miss the update. or i went to wrong direction. help please. TY jsx if else How to customize nested components? how to remove / unmount nested react components those are similar solutions but doesn't workout for me.

Martin Bieth · Accepted Answer · 2016-01-22T09:30:09.090

put all your file content in the snippet file next time, it's easier for us to answer to you.

Your component doesn't change because you don't change it's state. You should try to change the state of your component in the callback of the onChange event which receive as parameter the selected tab.

I came up with this (I didn't tested it but it should work)

export default class content extends Component {
  constructor(props){
    super(props);
    this.state={selectedTab:0}
    this.selectTab = this.selectTab.bind(this);
  }

  selectTab(tabId){
    this.setState({selectedTab: tabId});
  }

  getSelectedTab(){
    let tabNextContent;
    if(this.state.selectedTab === 0){
      tabNextContent = <CreateTabContent />;
    }else if(this.state.selectedTab ===1){
      tabNextContent = <PlanTabContent />;
    }else if(this.state.selectedTab === 2){
      tabNextContent = <TodoTabContent />;
    }else if(this.state.selectedTab === 3){
      tabNextContent = <ShopTabContent />;
    }else if(this.state.selectedTab === 4){
      tabNextContent = <SubmitTabContent />;
    }
    return tabNextContent;
  }

  render() {
    return (
      <div className="demo-tabs">
        <Tabs activeTab={this.state.selectedTab} onChange={this.selectTab} ripple>
          <Tab>Create</Tab>
          <Tab>plan</Tab>
          <Tab>Todo</Tab>
          <Tab>Shop</Tab>
          <Tab>submit</Tab>
        </Tabs>
        <section>
            {this.getSelectedTab()}
        </section>
      </div>
    )
  }
}

ReactJS baby step -- right way to do nested components

1 Answers1