Error with props/children when nesting certain components

[ericdfields]

I'm encountering an issue where simply nesting components inside a Formsy.Form component that are built to accept children breaks rendering, usually throwing some sort of props undefined error.

I can take the same components and move them outside of the Formsy.Form and the component renders fine. I've tried this with two separate tab libs, and the result is the same. So I think Formsy is at fault here, or maybe there's something I can do to make it work right.

Here is an example of a component that will trigger this behavior: https://github.com/ericdfields/formsy-tabs-demo/blob/master/client/components/Index/IndexComponent.jsx

And here it is live: http://formsy-tabs-demo.herokuapp.com … You're not going to see much; it's broken code in action!

To reiterate my point, the following breaks:

import React from 'react';
var Formsy = require('formsy-react');
var Tabs = require('react-simpletabs');

export default class IndexComponent extends React.Component {
  render() {

    return (
      <Formsy.Form {...this.props}>
        <Tabs>
          <Tabs.Panel title='Tab #1'>
            <h2>Content #1 here</h2>
          </Tabs.Panel>
          <Tabs.Panel title='Tab #2'>
            <h2>Content #2 here</h2>
          </Tabs.Panel>
          <Tabs.Panel title='Tab #3'>
            <h2>Content #3 here</h2>
          </Tabs.Panel>
        </Tabs>
      </Formsy.Form>
    )

  }
}

But doing this works:

import React from 'react';
var Formsy = require('formsy-react');
var Tabs = require('react-simpletabs');

export default class IndexComponent extends React.Component {
  render() {

    return (
      <div>
        <Tabs>
          <Tabs.Panel title='Tab #1'>
            <h2>Content #1 here</h2>
          </Tabs.Panel>
          <Tabs.Panel title='Tab #2'>
            <h2>Content #2 here</h2>
          </Tabs.Panel>
          <Tabs.Panel title='Tab #3'>
            <h2>Content #3 here</h2>
          </Tabs.Panel>
        </Tabs>
      <Formsy.Form {...this.props}>
      </Formsy.Form>
      </div>
    )

  }
}

I think Formsy is messing with the tab component or its children in an unsavory way. Here's what the props.children looks like on that Tabs component:

Thanks for any help!

[ericdfields]

Dug into this a little more today. The way in which formsy manipulates and returns its children makes it incompatible with other components that manipulate children. I've tested both react-tabs and react-simpletabs and they each get stuck looking for an array of valid React components on this.props.children, and instead get objects similar to the above screenshot.

[ericdfields]

At this point I'm thinking it's related to #120 and/or #121

[christianalfoni]

Hi @ericdfields and thanks for looking into this! In the next version Formsy stops messing around with the children and will use "react context" instead. That will fix the issue :-)