CODEWITHSUNDEEP
twitter-bootstrapreactjstabs
julia
julia

Reputation: 452

React Bootstrap Tab not changing content

Using react-bootstrap (latest version) following the example here: https://react-bootstrap.github.io/components.html#navigation

The following code correctly changes the key in the state, but the content for the tabs is not shown.

Expected: Click on Tab 2 Header, content "Tab 2 Content" must be shown What am I doing wrong? Actual: Click on Tab 2 Header, content "Tab 1 Content"

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

class ClosableTabs extends Component {

    constructor(props) {
        super(props);    
        this.state = {
            key: 1
        };
    }

    handleSelect(key) {
        console.log('selected' + key);
        this.setState({key: key});
    }

    render() {

        console.log(this.state.key);

        return (
            <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id="controlled-tab-example">
                <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
                <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
                <Tab eventKey={3} title="Tab 3">Tab 3 content</Tab>
            </Tabs>
        )
    }
}

export default ClosableTabs;

Upvotes: 4

Views: 6829

Answers (1)

Andrii Starusiev
Andrii Starusiev

Reputation: 7774

Everything work for me just if I bind handleSelect:

class ClosableTabs extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      key: 1
    };
    this.handleSelect = this.handleSelect.bind(this);
  }

  handleSelect(key) {
    console.log('selected' + key);
    this.setState({ key: key });
  }

  render() {

    console.log(this.state.key);

    return (
      <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id="controlled-tab-example">
        <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
        <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
        <Tab eventKey={3} title="Tab 3">Tab 3 content</Tab>
      </Tabs>
    )
  }
}

http://jsfiddle.net/e0agpgt2/90/

Upvotes: 5

Related Questions