How can I change tabs in react-bootstrap using a button?

Question

How can I change a tab by a click of a button using React/React-Bootstrap? For example, to click on a button and it let me go to the tab selected. Code below:

import React, {Component} from 'react'
import { Tabs, Tab } from 'react-bootstrap';

export default class TabPuzzle extends Component {

constructor(props) {
  super(props);
  this.state = {
    key: 2
  };
 this.handleSelect = this.handleSelect.bind(this)
}
handleSelect(key) {
  alert('selected ' + key);
  this.setState({key});
}
render () {
  return (
    <div>
      <Tabs activeKey={this.state.key} onSelect={this.handleSelect} 
       id="controlled-tab-example">
              <Tab eventKey={1} title="Tab 1"> Tab Content 1 </Tab>
              <Tab eventKey={2} title="Tab 2"> Tab Content 2 </Tab>
              <Tab eventKey={3} title="Tab 3"> Tab Content 3 </Tab>
      </Tabs>
            <button onClick={()=>this.handleSelect("3")}>Go to tab 3</button> 
    </div>
  )
 }
}

Ross Allen · Accepted Answer · 2017-05-24 23:13:34Z

5

this.state.key is a number in your state, but the button is passing a string "3". Pass a number instead, and the <Tabs> component should work as you expect:

<button onClick={()=>this.handleSelect(3)}>Go to tab 3</button>

answered May 24, 2017 at 23:13

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I change tabs in react-bootstrap using a button?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related