CODEWITHSUNDEEP
reactjsreact-tabs
user3594118
user3594118

Reputation: 201

Show content on tab click - React

I am really new to React and want to display 2 tabs, first tab click should display the canvas I have and second tab should display the dropdown. I have all the three in the page right now.

My page looks like this - 2 tabs , one dropdown and one canvas.

How to bind the canvas div on the first tab click and dropdown to show on the second tab click.

Edited Code: 

export class Graph extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            Vdata: null,
            Edata: null,
            iconData : iconsData,
            currentIndex: 0 
        }
        this._tabClick = this._tabClick.bind(this);
        this.MainGraphComponent = this.MainGraphComponent.bind(this);
        this.CustomizedGraphComponent = this.CustomizedGraphComponent.bind(this);
    }
CustomizedGraphComponent(){
    return(
        <div className={style.container} style={{ width: '100%', paddingTop:20}}>
            <DropdownButton>
                {
                   //elements
                }
            </DropdownButton>
        </div>
    )
}

MainGraphComponent(){
    <div ref={(n) => {
        this.graphContainer = n;
        return;
    }} id="container"
    style={{height: '100%', width: '100%'}}
    />
}

 _tabClick(clickedIndex) {
        const {currentIndex} = this.state.currentIndex;
        if(clickedIndex !== currentIndex) {
            this.setState({currentIndex: clickedIndex })
        }
    }


render (){
 return (

                   <div className={style.container} style={{height: '100%', width: '100%'}}>
            <Tabs
                tabs={[
                    {
                        name: 'Main Graph',
                        title: 'Main Graph',
                        component: <this.MainGraphComponent/>
                    },
                    {
                        name: 'Customized Graph',
                        title: 'Customized Graph',
                        component:<this.CustomizedGraphComponent/>
                    }
                ]}
                onTabClick={this._tabClick}

            />
        </div>

    );
 }

Upvotes: 2

Views: 7585

Answers (3)

Saurav Seth
Saurav Seth

Reputation: 311

The way I did this was to render the required component based on the index of the tabs. This index is saved in the state and is changed every time a tab is clicked. Sample code

<Tabs
    tabs=[
        {
            name: 'Main Graph',
            title: 'Main Graph',
            component: <YourGraphComponent/>
         },
         {
             name: 'Customized Graph',
             title: 'Customized Graph',
             component: <YourCustomizedGraphComponent/>
         }
        ]
        /*
          Assuming Tabs is a component, no need to specify a click handler unless
          you want to add some custom handling.
          onTabClick={this._onSelect}
        */
/>

and then in you tabs component

this.state={
    currentIndex: 0 //or get the default from the parent
}

_tabClick(clickedIndex) {
    const {currentIndex} = this.state;
    if(clickedIndex !== currentIndex) {
        this.setState({currentIndex: clickedIndex });
    }
}

render() {
  return (<div>
      {/*Basic code to render the tabs and attach click handlers to it based on index*/}
      {this.props.tabs.map((tab, index) => {
        return (<div onClick={this._tabClick.bind(index)}>
            tab.label
        </div>);
      })}
      {/*component fetched from the tabs array based on the current index*/}
      {this.props.tabs[this.state.currentIndex].component}
  </div>);
  }
}

Upvotes: 1

cpru
cpru

Reputation: 78

When I have used tabs in the past I have used React Tabs. It's really easy to spin up and get going, and will allow you to change some functionality to fit your needs as well as style them however you want. It comes with tab switching functionality by default, but you can customize it to use local state to handle the switching for more control. All the instructions on how to do it are in the link.

Upvotes: 1

TiFe Pariola
TiFe Pariola

Reputation: 21

Do you consider using states? Like the display of the drop down can be set to a state value which is none initially and on tab click you setState to change the value.

Upvotes: 1

Related Questions