Wrapped components with state messing up

[NogsMPLS]

wrapped components that have start seem to be all wonky lately. They render initially just fine, but with an Invariant warning. It also hinders the live-update of that component during editor changes.

Was working before...error suggests its either the infamous 2 react loaded problem, or refs.

Also look into dependency changes, as this was working not to long ago.

[Kielan]

I think I have run into this @NogsMPLS can you please further document what you mean by wrapped components? I'm assuming this is the same as nested components, which is where I have run into mysterious missing classes that I think I did not cause.

What is the "infamous 2 react loaded problem" could you provide a link?

[NogsMPLS]

Well, this repository allows you to append a styleguide static to a component which this repo will then read to automate documentation generation. a standard way to document is just to reference the component. So for a simple example, we have Button:

Button.styleguide = {
  index: '1.1',
  category: 'Buttons',
  example: `
    <Button>Sample Button</Button>
    <Button disabled>Sample Disabled Button</Button>
  `
};

The example is what holds the markup/components that will eventually be rendered out on the screen. This is great, except for component that need to have state in them for proper functionality. For instance a more complex "wrapped" example might look like this:

Tabs.styleguide = {
  category: 'Layout',
  index: '4.8',
  wrappedExample: true,
  example: `
// Internal Methods {
class TabsExample extends React.Component {
  state = {
    index: 1
  };

  handleTabChange = (index) => {
    this.setState({index});
  };

  handleActive = () => {
    console.log("Special one activated");
  };
// }
  render () {
    return (
      <section>
        <h5>Tabs</h5>
        <p>This tabs can be disabled or hidden</p>
        <Tabs index={this.state.index} onChange={this.handleTabChange}>
          <Tab label="Primary">
            <small>Primary content</small>
          </Tab>
          <Tab label="Secondary" onActive={this.handleActive}>
            <small>Secondary content</small>
          </Tab>
          <Tab label="Third" disabled>
            <small>Disabled content</small>
          </Tab>
          <Tab label="Fourth" hidden>
            <small>Fourth content hidden</small>
          </Tab>
          <Tab label="Fifth">
            <small>Fifth content</small>
          </Tab>
        </Tabs>
      </section>
    );
  }
// Mount Component {
}

ReactDOM.render(<TabsExample />, mountNode);
// } 
`
};

This is causing some problems in the functionality of the documentation site that is produced from this repo. An example can be seen here: http://digitalriver.github.io/react-atlas/Layout/Tabs

Noticed the minification error. When it's unminified it basically references what this page warns about: https://facebook.github.io/react/warnings/refs-must-have-owner.html