how to add tab component and load pages in tabs in react js app?

I have a react js app, that i’m working on. I created a myfirstcomponent, which call a rest api and displays some json data. Now I want to expand my app and add more components, say mySecondComponent. but i want to make it such that i create tabs for this. so I researched and based on the tutorials, i created a tabs and a tab component as well. Now, i want to modify my render method in my app.js file , such that i can render my components within the tab component. so i tried the following, added the Tabs and Tab component inside the app div, now i need to show/hide the components based on the selected tab. . I’m new to react so, i want to make sure i am headed in right direction. is this the right way of doing this in reactjs?

render() {
  return (
    <div className="app">
      <Tabs tabs={['first', 'second']} selected={ this.state.selected } 
        setSelected={ this.setSelected }>
          <Tab isSelected={ this.state.selected === 'first' }></Tab>
          <Tab isSelected={ this.state.selected === 'second' }></Tab>
        </Tabs>
        <myfirstcomponent className="compnent"/>
        <mySecondcomponent className="compnent"/>
      </div>
    );
  }

app.js file

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <myfirstcomponent className="App-com"/>
      </div>
    );
  }
}

export default App;

Tabs

import React from 'react';
class Tabs extends React.Component {
  render() {
    return (
       <div style={{ width: '30%' }}>
          <ul className="nav nav-tabs">
             {
                 this.props.tabs.map(tab => {
                   const active = (tab === this.props.selected ? 'active ' : '' );
                   return (
                     <li className="nav-item" key={ tab }>
                       <a className={"nav-link " + active + styles.tab} onClick={ () => 
                         this.props.setSelected(tab) }>
                         { tab }
                       </a>
                    </li>
                  );
                 })
             }
          </ul>
        { this.props.children }
      </div>
    );
  }
}
export default Tabs;

Tab.js

import React from 'react';
class Tab extends React.Component {
  render() {
    if (this.props.isSelected) {
      return (
        <div>
          { this.props.children }
        </div>
      );
    }
    return null;
  }
}
export default Tab;

Answer

I don’t think that approach is right. You should be using routing inside the tab component and links to the routes. Pluralsight site has a pretty good example on how to implement what you want to do. https://app.pluralsight.com/guides/how-to-create-nested-tab-routes-with-react-router

Advertisement

Answer