react-bootstrap-tabs library, compliation error

react-bootstrap alert
react-bootstrap github
react bootstrap themes
react-bootstrap example
react-bootstrap icons
react-bootstrap button
react-bootstrap typescript
react-bootstrap grid

getting in trouble with https://github.com/freeranger/react-bootstrap-tabs library, used for Tab creation at React

My code which is work:

<Tabs onSelect={(index, label) => console.log(label + ' selected')}>
                            <Tab label="TEST">
                                <div className="table-scrollable table-scrollable-borderless">
                                    <table className="table table-hover table-light">
                                        <thead>
                                            <tr className="uppercase">
                                                <th> # </th>
                                                <th> First Name </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td> 1 </td>
                                                <td> Mark </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </Tab>
                            <Tab label="TEST2">
                                <div className="table-scrollable table-scrollable-borderless">
                                    <table className="table table-hover table-light">
                                        <thead>
                                            <tr className="uppercase">
                                                <th> # </th>
                                                <th> First Name </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td> 1 </td>
                                                <td> Mark </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </Tab>
                    </Tabs>

But if i change to

<Tabs onSelect={(index, label) => console.log(label + ' selected')}>
                            {this.state.users.map(user=>
                                <Tab label={user} >
                                    <div className="table-scrollable table-scrollable-borderless">
                                        <table className="table table-hover table-light">
                                            <thead>
                                                <tr className="uppercase">
                                                    <th> # </th>
                                                    <th> First Name </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td> 1 </td>
                                                    <td> Mark </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </Tab>
                            )}
                        </Tabs>

It gives me error

TypeError: Cannot read property 'props' of undefined TabsComponent._renderContent C:/Users/repos/node_modules/react-bootstrap-tabs/dist/index.js:198

Do you have data in your users state? Looking at the code of the library on the error line:

var contentClassNames = (0, _classnames2.default)('tab-content', this.props.contentClass, contentTab.props.className);

I think it is trying to find a tab inside the Tabs component. If your users state is empty your map will result in an empty array.

Try adding a default tab besides the this.users.map, or if not a tab, at least a dummy element like a <div/> you can hide via css or perhaps a <React.Fragment/>.

Compilation Error while using react-bootsrap with typescript � Issue , Everything was working fine with the previous version of react-bootstrap library. I am getting following error on compilation: /client/node_modules� React Bootstrap Tabs React Tabs - Bootstrap 4 & Material Design. React Bootstrap tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time. Bootstrap tabs are components which separate content placed in the same wrapper, but in the separate pane.

I think your users array is initially empty ([]). This makes the tabs component error out:

https://codesandbox.io/s/wyj88jky2k

You should check that this.state.users has entries before trying to render your tabs.

To be honest, I would expect the tabs library to be able to handle an empty tabs array - perhaps you could raise a bug on their github page.

React-Bootstrap Tabs component behaving weird � Issue #1960 , I was using some older version of react-bootstrap in my application. when I upgraded to React version 15.1.0, my Tabs weren't loading or with error. to host and review code, manage projects, and build software together. Tabbed components #. Dynamic tabbed interfaces. Examples #. Create dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. Tabs is a higher-level component for quickly creating a Nav matched with a set of TabPanes.

12 hours in code makes sense.

I'm changing only Tab, but need to re-render whole element, starting from Tabs after page load

{!this.state.loading ? <UsersTabs users={this.state.users} /> : "Loading"}

With

class UsersTabs extends Component {
    render() {
        return (
            <Tabs onSelect={(index, label) => console.log(label + ' selected')}>
                {this.props.users.map(market =>
                    <Tab label={user} >
                        ...
                    </Tab>
                )}
            </Tabs>
        );
    }
}

Components, You got an error! Change this and that You can also control the visual state directly which is great if you want to build more complicated alerts. How's it going ?! An accessible and easy tab component for ReactJS. Contribute to reactjs/react-tabs development by creating an account on GitHub.

Tab components, Tabs is a higher-level component for quickly creating a Nav matched with a set of TabPane s. HomeProfileContact. I was using some older version of react-bootstrap in my application. The version of react at that time was 0.14.7 Today when I upgraded to React version 15.1.0, my Tabs weren&#39;t loading or with

tabs - react-bootstrap � Bit, Mark the Tab with a matching `eventKey` as active. Tags: Navigation, React, Tab, UI Components. Dependencies: prop-types-extra, prop-types, uncontrollable,� React Bootstrap 4 Tabs Component. Contribute to freeranger/react-bootstrap-tabs development by creating an account on GitHub.

A Simple React <Tabs/> Component. A client of mine recently gave , The client side of such project was built using React and I initially thought… built using React and I initially thought about using the react-tabs library, but later Its goal is to simply render a Bootstrap-like tab, allow the developer to Build a React Accordion Component from Scratch Using React Hooks. This is a modern React tabs component based on the latest Bootstrap 4 framework. Installation: # NPM $ npm install react-bootstrap-tabs --save

Comments
  • Thank you for reply. Users is not empty, it's just simple Array(2) 0: "John" 1: "Mike"
  • Thank for your reply. My users array is not empty initially.
  • Dude - when I empty the array you get that exact error meassage. It must be empty at some point. Have you logged out the array before rendering it?