score:6
the tab container, replaced defaultkey
with activekey={this.state.key}
, and managed the state of the parent with a function, passed as a prop to componenta.
on the parent of the tab.container
handleselect(key){
this.setstate({ key : key })
}
render() {
... render stuff ...
return (
<tab.container id="tabcontainer" activekey={this.state.key}>
<tab.content animation>
<tab.pane eventkey="a">
<componenta changetab={this.handleselect}/>
</tab.pane>
<tab.pane eventkey="b">
<componentb />
</tab.pane>
</tab.content>
<nav stacked bsstyle="pills" pullleft>
... navitems ...
</nav>
<tab.container>
)
}
and on the component a
eventhandler(){
this.props.changetab("b")
}
Source: stackoverflow.com
Related Query
- React-Bootstrap - How to activate a Tab outside NavItem
- How to change Tabs Layout and Tab style in react bootstrap
- How to get the data from React Context Consumer outside the render
- How to make a Bootstrap dropdown with React
- React bootstrap Navbar: How to right align a navbar item
- how to setup bootstrap 4 scss with react webpack
- React Bootstrap - How to manually close OverlayTrigger
- how to access vairables outside of map function in js and jsx in a React component
- React Navigation 2: How to check previous scene and to disable tab change
- How to add favicon to react application browser tab (duplicate)
- How to configure webpack in storybook to allow babel to import react components outside of project folder
- Unable to display icon in React Bootstrap Tab instead of text
- How to access the Redux store outside of a component in React
- How do I make my React Bootstrap cards line up horizontally and equally spaced (also responsively if possible)
- React Native Tab Navigator: How to let icon overflow tabbar?
- How can I open an external link in new tab in react native?
- How to use react unstated outside of render method?
- How to set initial tab in react navigation TabNavigator dynamically
- How do I dynamically change the content of a React Bootstrap modal?
- How to capture all clicks outside of a React Native component?
- How can I use bootstrap in react with rails
- In React how to import only needed Bootstrap styles. Bootstrap css modules?
- How to distinguish what caused rendering of React component: something from the inside or from the outside of the component?
- How to edit react bootstrap table and save data after editing
- How to display all options in react bootstrap typeahead menu with existing selection
- How to customize Bootstrap variables in a React app?
- How to remove caret from dropdown nav item in React Bootstrap
- Usign react-router-dom, how can I access browserHistory object from outside a React component?
- How do I refresh my component when clicked on tab on bottomTabNavigator in React Native, in React Navigation v3?
- How to access props outside of a class component React
More Query from same tag
- Why this.props.map is not a function?
- Paginaton with ReactJS
- how to test a react hook that can have a ref of an html element passed to it
- Is it possible to use the touch ripple effect of MUI on a div?
- React jest and MSAL getting BrowserAuthError
- If setting/updating state is async, how does 'resetting' the input field work?
- ReactJS Static File
- Why isn't my ternary operator working in Jsx?
- How to Define TextdecoderStream and TextEncoderStream while using Web Serial in react?
- How to set attribute "dangerouslySetInnerHTML" with ellipsis using antd?
- HOC in react.js docs
- Using .map() to generate elements with Refs
- useEffect not getting dependency value updated
- why history is needed in dependency array of useEffect
- React Typescript - variable null check ignored and sends error
- Unable to refetch data after mutation with useQuery, useMutation and refetch callback
- How to use a state from another file in react
- show confirmation dialog using redux-observable
- Entity adapter getSelectors method generates "Cannot read property 'map' of undefined" error
- Options not showing when using custom input in React-Bootstrap-TypeAhead
- Best way to check if some data is present in the redux-store before performing an action
- React being able to autofill a second input form
- How to get a particular div into fullscreen(full window size) in reactjs
- When should you run the 'yarn start' command while working on a React project?
- Creating a barrel file in react (using .tsx)
- How can I rotate and zoom in on a Three.js object and share in real time between canvases?
- Dynamic Value Dropdown in React
- React with Firebase - submitting Formik form data
- Export function return object Object
- React Native WebView, how to store username and password