Skip to content

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

@mmmavis

Description

@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? 😁

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions