React Tabs and selectedIndex

user_387761 0
Viewed 7159

I'm using React Tabs (https://github.com/reactjs/react-tabs) in controlled mode.

Setting the tabIndex in a parent Component:

this.setState({
    tabIndex: 1,
});

And passing the tabIndex through in the properties:

<TabContents tabIndex={this.state.tabIndex} />

Putting the component into "controlled mode":

export default class TabContents extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0
        }

    }

    ...

    render() {

        <Tabs selectedIndex={this.props.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>

    ...

    }
}

This works and the second tab (with a tabIndex of 1) is selected.

However when I click on any other tab, nothing happens. It's stuck on the tabIndex of 1. How do I go about allowing to switch tabs when in "controlled mode"?

Full JSX:

<Tabs selectedIndex={this.props.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
    <TabList>
        <Tab>Accounts <span className="badge badge-pill badge-primary">{this.props.selectedSource ? this.props.sources[sourceIndex].accounts.length : 0}</span></Tab>
        <Tab>Forms</Tab>
    </TabList>

    <TabPanel>
        {this.props.activeDetails ? this.props.activeDetails.make : null }

        {accounts && (
            <ul className="accounts-list list-group">{accounts}</ul>
        )}

        {disabled_accounts && (
            <ul className="accounts-list disabled list-group">{disabled_accounts}</ul>
        )}

    </TabPanel>
    <TabPanel>
        <h2>Forms</h2>
        {this.props.activeDetails ? this.props.activeDetails.make : null }
    </TabPanel>
</Tabs>
reactjs
2 Answers
 <Tabs selectedIndex={this.props.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>

As per your question you have multiple child components, But on select you are changing the local state onSelect={tabIndex => this.setState({ tabIndex })}

What you need to do?

  1. You need to create one method in parent component
  2. Pass that props to children components
  3. on children onSelect call that parent method

Now, parent will be responsible for active tab.

Here is an example of calling parent from child.

user_26308170

As per your above comments you need to save with parent and child components values..

so you can use state and constructors is very effective..

No need to send parameters to parent . you can access the state value from the parent .

user_75353720
Related