Repository: mozilla-services/react-jsonschema-form
Pull request #645 (2017-07-21 15:07:09)

add formData to ArrayFieldTemplate props
### Reasons for making this change

My use case: i'm rendering an array of objects into a table. I want to render columns only for properties that have data on some formData item. I need to loop the formData to achieve this.

### 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**
  - [ ] I've added and/or updated tests
  - [x] I've updated docs if needed
  - [ ] 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 91aecd4b6..7f1558ddf 100644
--- a/README.md
+++ b/README.md
@@ -850,6 +850,7 @@ The following props are passed to each `ArrayFieldTemplate`:
 - `uiSchema`: The uiSchema object for this array field.
 - `title`: A string value containing the title for the array.
 - `formContext`: The `formContext` object that you passed to Form.
+- `formData`: The formData for this array.
 
 The following props are part of each element in `items`:
 
@@ -896,6 +897,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
 
@@ -1412,6 +1420,7 @@ This component follows [JSON Schema](http://json-schema.org/documentation.html)
  - Multi-step wizard: https://jsfiddle.net/sn4bnw9h/1/
  - Using classNames with uiSchema: https://jsfiddle.net/gfwp25we/1/
  - Conditional fields: https://jsfiddle.net/69z2wepo/83018/
+ - Advanced conditional fields: https://jsfiddle.net/cowbellerina/zbfh96b1/
  - Use radio list for enums: https://jsfiddle.net/f2y3fq7L/2/
  - Reading file input data: https://jsfiddle.net/f9vcb6pL/1/
  - Custom errors messages with transformErrors : https://jsfiddle.net/revolunet/5r3swnr4/
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;
   }
diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js
index 4aa51bf86..bbc9d6d90 100644
--- a/src/components/fields/ArrayField.js
+++ b/src/components/fields/ArrayField.js
@@ -340,6 +340,7 @@ class ArrayField extends Component {
       title,
       TitleField,
       formContext,
+      formData,
     };
 
     // Check if a custom render function was passed in


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);
       });
     });
   });