Issue rendering basic tabs

[senglert1124]

I am getting the following error:

Exception thrown by hook while handling onSetChildren: Invariant Violation: Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren().

Here is the code:

import React, { Component } from 'react';
import Tabs from 'react-responsive-tabs';

import 'react-responsive-tabs/styles.css';

class WWNG_Sales_MemberTabs extends Component {
    constructor(props) {
        super(props)
        this.state = {
            memberNumber: "",
            items: [],
        }
    }

    componentWillReceiveProps(props) {
        this.setState({ memberNumber: props.memberNumber }, () => {
            this.getItems()
        })
    }

    getItems() {
        var items = []
        items.push({ title: "Usage", getContent: () => "Usage", key: 0, tabClassName: "tab", panelClassName: "panel" })
        items.push({ title: "Transactions", getContent: () => "Transactions", key: 1, tabClassName: "tab", panelClassName: "panel" })
        items.push({ title: "Correspondence", getContent: () => "Correspondence", key: 2, tabClassName: "tab", panelClassName: "panel" })
        items.push({ title: "History", getContent: () => "History", key: 3, tabClassName: "tab", panelClassName: "panel" })
        items.push({ title: "Card Printing", getContent: () => "Card Printing", key: 4, tabClassName: "tab", panelClassName: "panel" })

        this.setState({ items: items })
    }

    render() {
        return (
            <div>
                <Tabs items={this.state.items} />
            </div>
        );
    }
}

export default WWNG_Sales_MemberTabs;

[tlehtimaki]

@senglert1124 I don't think this is a problem with this repository. Is there a reason why are you calling this.getItems() in setState as second parameter? How about doing something like this:

componentWillReceiveProps(props) {
    this.setState({ 
           memberNumber: props.memberNumber,
           items: this.getItems()
    });
}

getItems() {
    var items = []
    items.push({ title: "Usage", getContent: () => "Usage", key: 0, tabClassName: "tab", panelClassName: "panel" })
    items.push({ title: "Transactions", getContent: () => "Transactions", key: 1, tabClassName: "tab", panelClassName: "panel" })
    items.push({ title: "Correspondence", getContent: () => "Correspondence", key: 2, tabClassName: "tab", panelClassName: "panel" })
    items.push({ title: "History", getContent: () => "History", key: 3, tabClassName: "tab", panelClassName: "panel" })
    items.push({ title: "Card Printing", getContent: () => "Card Printing", key: 4, tabClassName: "tab", panelClassName: "panel" })

    return items;
}

[senglert1124]

Thanks for the quick response. Yeah. I tried that, but same error. I know the component structure is fine since it renders fine if I exclude Tabs items={this.state.items} />. It even errors if I hard code the item in the render. Feels like a dependency is missing, but not sure. I'll keep looking at it.

[maslianok]

I think it's too late trying to help you but I'll try to resolve this issue for anyone who will come here with the same problem :)

---

Actually, I'm able to run the exact code from the example above without any errors.

I tried to google the error you faced up and seems it may be a problem with React:
FineUploader/react-fine-uploader#129
cerner/terra-core#256

Update: Dan Abramov says that this error was fixed in [email protected]
facebook/react#8487 (comment)