Repository: mozilla-services/react-jsonschema-form
Pull request #658 (2017-08-04 15:42:01)

Pass more props to ErrorList
### Reasons for making this change

`formContext` should be passed to every component that renders something for proper on-the-fly localization, styling etc.

EDIT: I passed also `errorSchema`, `schema` and `uiSchema` since they allow you to create a much more powerful & integrated component (you can pick labels from the `schema`, styles & root id from `uiSchema` to create links to the HTML id anchors where the errors are etc).

### Checklist

* [ ] **I'm updating documentation**
  - [ ] I've checked the rendering of the Markdown text I've added
  - [ ] If I'm adding a new section, I've updated the Table of Content
* [x] **I'm adding or updating code**
  - [x] I've added and/or updated tests
  - [x] I've updated docs if needed
  - [x] I've run `npm run cs-format` on my branch to conform my code to [prettier](https://github.com/prettier/prettier) coding style
* [ ] **I'm adding a new feature**
  - [ ] I've updated the playground with an example use of the feature



Patch:
diff --git a/README.md b/README.md
index 2b361fc3e..4830699cf 100644
--- a/README.md
+++ b/README.md
@@ -896,6 +896,13 @@ render((
 
 > Note: Your custom `ErrorList` template will only render when `showErrorList` is `true`.
 
+The following props are passed to `ErrorList`
+
+- `errors`: An array of the errors.
+- `errorSchema`: The errorSchema constructed by `Form`.
+- `schema`: The schema that was passed to `Form`.
+- `uiSchema`: The uiSchema that was passed to `Form`.
+- `formContext`: The `formContext` object that you passed to Form.
 
 ### Custom widgets and fields
 
diff --git a/src/components/Form.js b/src/components/Form.js
index 1455d4f21..1d0e9a39b 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -77,11 +77,19 @@ export default class Form extends Component {
   }
 
   renderErrors() {
-    const { status, errors } = this.state;
-    const { ErrorList, showErrorList } = this.props;
+    const { status, errors, errorSchema, schema, uiSchema } = this.state;
+    const { ErrorList, showErrorList, formContext } = this.props;
 
     if (status !== "editing" && errors.length && showErrorList != false) {
-      return <ErrorList errors={errors} />;
+      return (
+        <ErrorList
+          errors={errors}
+          errorSchema={errorSchema}
+          schema={schema}
+          uiSchema={uiSchema}
+          formContext={formContext}
+        />
+      );
     }
     return null;
   }


Test patch:
diff --git a/test/validate_test.js b/test/validate_test.js
index 83c568250..2b9d7d2a6 100644
--- a/test/validate_test.js
+++ b/test/validate_test.js
@@ -513,24 +513,57 @@ describe("Validation", () => {
         minLength: 1,
       };
 
+      const uiSchema = {
+        foo: "bar",
+      };
+
       const formData = 0;
 
-      const CustomErrorList = ({ errors }) =>
-        <div className="CustomErrorList">
-          {errors.length} custom
+      const CustomErrorList = ({
+        errors,
+        errorSchema,
+        schema,
+        uiSchema,
+        formContext: { className },
+      }) =>
+        <div>
+          <div className="CustomErrorList">
+            {errors.length} custom
+          </div>
+          <div className={"ErrorSchema"}>
+            {errorSchema.__errors[0]}
+          </div>
+          <div className={"Schema"}>
+            {schema.type}
+          </div>
+          <div className={"UiSchema"}>
+            {uiSchema.foo}
+          </div>
+          <div className={className} />
         </div>;
 
       it("should use CustomErrorList", () => {
         const { node } = createFormComponent({
           schema,
+          uiSchema,
           liveValidate: true,
           formData,
           ErrorList: CustomErrorList,
+          formContext: { className: "foo" },
         });
         expect(node.querySelectorAll(".CustomErrorList")).to.have.length.of(1);
         expect(node.querySelector(".CustomErrorList").textContent).eql(
           "1 custom"
         );
+        expect(node.querySelectorAll(".ErrorSchema")).to.have.length.of(1);
+        expect(node.querySelector(".ErrorSchema").textContent).eql(
+          "is required"
+        );
+        expect(node.querySelectorAll(".Schema")).to.have.length.of(1);
+        expect(node.querySelector(".Schema").textContent).eql("string");
+        expect(node.querySelectorAll(".UiSchema")).to.have.length.of(1);
+        expect(node.querySelector(".UiSchema").textContent).eql("bar");
+        expect(node.querySelectorAll(".foo")).to.have.length.of(1);
       });
     });
   });