"Contexts differ" warning when owner and parent of a child component differ

[mmmavis]

// child component
var Input = React.createClass({
  mixins: [Formation.FormMixin],
  render: function () {
    return (
      <fieldset>
        <input blah blah blah>
      </fieldset>
    );
  }
});

// form
var Form = Formation.CreateForm({
  getSchema: function () {
    return {
      "fullname": {
        required: true,
        label: "Full Name"
      }
    };
  },
  onSuccess: function (data) {
    console.log(data);
  },
  render: function () {
    var schema = this.getSchema();
    return (
    <form and_its_attributes>
      {
        Object.keys(schema).map(function(formName) {
          var props = schema[formName];
          schema[formName].name = formName;
          return (
            <Input {...props} key={formName}>{formName}</Input>
          );
        })
      }
    </form>);
  }
});

// page wrapper
var MyPage = React.createClass({
  render: function() {
    return (
      <div className="page-wrapper">
         <FringeEventForm/>
      </div>
    );
  }
});

And I got this warning on my browser console

"Warning: owner-based and parent-based contexts differ 
(values: `[object Object]` vs `[object Object]`) for key (reactFormation) 
while mounting Input (see: http://fb.me/react-context-by-parent)"

Any suggestions on how I can work around my code to fix this? :grin:

[k88hudson]

@mmmavis what version of react are you using?

[mmmavis]

Hi @k88hudson , it's React 0.13.2

if it helps, this is where I used react-formation on: https://github.com/mozilla/2015.mozillafestival.org/pull/266 :grimacing:

[k88hudson]

If you upgrade to 13.3 it will fix the issue, are you able to do this?

[mmmavis]

@k88hudson i'll give it try and let you know :+1: