React Tabs and selectedIndex
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
asked Nov 14 '18 at 9:59
beingalex
1,47422152
|
show 1 more comment
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
asked Nov 14 '18 at 9:59
beingalex
1,47422152
You are usingselectedIndex={this.props.tabIndex}and setting into state, I think you need to usethis.state.tabIndex.
– Just code
Nov 14 '18 at 10:04
I want to set theselectedIndexin the parent controller, which is why I am usingthis.props.tabIndex
– beingalex
Nov 14 '18 at 10:05
Can you add full JSX?
– Just code
Nov 14 '18 at 10:06
Added the full JSX
– beingalex
Nov 14 '18 at 10:07
You need to create one method into parent component maintain state there and onSelect={tabIndex => //call parent method}
– Just code
Nov 14 '18 at 10:12
|
show 1 more comment
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
asked Nov 14 '18 at 9:59
beingalex
1,47422152
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
reactjs
asked Nov 14 '18 at 9:59
beingalex
1,47422152
asked Nov 14 '18 at 9:59
beingalex
1,47422152
edited Nov 14 '18 at 10:06
asked Nov 14 '18 at 9:59
beingalex
1,47422152
asked Nov 14 '18 at 9:59
beingalex
1,47422152
asked Nov 14 '18 at 9:59
beingalex
1,47422152
1,47422152
You are usingselectedIndex={this.props.tabIndex}and setting into state, I think you need to usethis.state.tabIndex.
– Just code
Nov 14 '18 at 10:04
I want to set theselectedIndexin the parent controller, which is why I am usingthis.props.tabIndex
– beingalex
Nov 14 '18 at 10:05
Can you add full JSX?
– Just code
Nov 14 '18 at 10:06
Added the full JSX
– beingalex
Nov 14 '18 at 10:07
You need to create one method into parent component maintain state there and onSelect={tabIndex => //call parent method}
– Just code
Nov 14 '18 at 10:12
|
show 1 more comment
You are usingselectedIndex={this.props.tabIndex}and setting into state, I think you need to usethis.state.tabIndex.
– Just code
Nov 14 '18 at 10:04
I want to set theselectedIndexin the parent controller, which is why I am usingthis.props.tabIndex
– beingalex
Nov 14 '18 at 10:05
Can you add full JSX?
– Just code
Nov 14 '18 at 10:06
Added the full JSX
– beingalex
Nov 14 '18 at 10:07
You need to create one method into parent component maintain state there and onSelect={tabIndex => //call parent method}
– Just code
Nov 14 '18 at 10:12
You are using
selectedIndex={this.props.tabIndex} and setting into state, I think you need to use this.state.tabIndex.– Just code
Nov 14 '18 at 10:04
You are using
selectedIndex={this.props.tabIndex} and setting into state, I think you need to use this.state.tabIndex.– Just code
Nov 14 '18 at 10:04
I want to set the
selectedIndex in the parent controller, which is why I am using this.props.tabIndex– beingalex
Nov 14 '18 at 10:05
I want to set the
selectedIndex in the parent controller, which is why I am using this.props.tabIndex– beingalex
Nov 14 '18 at 10:05
Can you add full JSX?
– Just code
Nov 14 '18 at 10:06
Can you add full JSX?
– Just code
Nov 14 '18 at 10:06
Added the full JSX
– beingalex
Nov 14 '18 at 10:07
Added the full JSX
– beingalex
Nov 14 '18 at 10:07
You need to create one method into parent component maintain state there and onSelect={tabIndex => //call parent method}
– Just code
Nov 14 '18 at 10:12
You need to create one method into parent component maintain state there and onSelect={tabIndex => //call parent method}
– Just code
Nov 14 '18 at 10:12
|
show 1 more comment
2 Answers
2
active
oldest
votes
<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?
- You need to create one method in parent component
- Pass that props to children components
- on children
onSelectcall that parent method
Now, parent will be responsible for active tab.
Here is an example of calling parent from child.
answered Nov 14 '18 at 10:20
Just code
9,18142966
add a comment |
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 .
answered Nov 14 '18 at 10:39
Karthik
2910
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53297452%2freact-tabs-and-selectedindex%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
<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?
- You need to create one method in parent component
- Pass that props to children components
- on children
onSelectcall that parent method
Now, parent will be responsible for active tab.
Here is an example of calling parent from child.
answered Nov 14 '18 at 10:20
Just code
9,18142966
add a comment |
<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?
- You need to create one method in parent component
- Pass that props to children components
- on children
onSelectcall that parent method
Now, parent will be responsible for active tab.
Here is an example of calling parent from child.
answered Nov 14 '18 at 10:20
Just code
9,18142966
add a comment |
<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?
- You need to create one method in parent component
- Pass that props to children components
- on children
onSelectcall that parent method
Now, parent will be responsible for active tab.
Here is an example of calling parent from child.
answered Nov 14 '18 at 10:20
Just code
9,18142966
<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?
- You need to create one method in parent component
- Pass that props to children components
- on children
onSelectcall that parent method
Now, parent will be responsible for active tab.
Here is an example of calling parent from child.
answered Nov 14 '18 at 10:20
Just code
9,18142966
answered Nov 14 '18 at 10:20
Just code
9,18142966
answered Nov 14 '18 at 10:20
Just code
9,18142966
answered Nov 14 '18 at 10:20
Just code
9,18142966
9,18142966
add a comment |
add a comment |
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 .
answered Nov 14 '18 at 10:39
Karthik
2910
add a comment |
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 .
answered Nov 14 '18 at 10:39
Karthik
2910
add a comment |
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 .
answered Nov 14 '18 at 10:39
Karthik
2910
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 .
answered Nov 14 '18 at 10:39
Karthik
2910
answered Nov 14 '18 at 10:39
Karthik
2910
answered Nov 14 '18 at 10:39
Karthik
2910
answered Nov 14 '18 at 10:39
Karthik
2910
2910
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53297452%2freact-tabs-and-selectedindex%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You are using
selectedIndex={this.props.tabIndex}and setting into state, I think you need to usethis.state.tabIndex.– Just code
Nov 14 '18 at 10:04
I want to set the
selectedIndexin the parent controller, which is why I am usingthis.props.tabIndex– beingalex
Nov 14 '18 at 10:05
Can you add full JSX?
– Just code
Nov 14 '18 at 10:06
Added the full JSX
– beingalex
Nov 14 '18 at 10:07
You need to create one method into parent component maintain state there and onSelect={tabIndex => //call parent method}
– Just code
Nov 14 '18 at 10:12