Revert support for "custom children" in uppercase components (#891)

* add breaking test

* revert

* update changes

Author: jchavarri

CHANGES.md

@@ -1,8 +1,5 @@
 # Unreleased
 
-* BREAKING, ppx: Allow passing an array of custom children to a component
-  without having to wrap in array literal ([@jchavarri in #748](https://github.com/reasonml/reason-react/pull/823))
-
 # 0.15.0
 
 * Add `isValidElement` (@r17x in

ppx/reason_react_ppx.ml

@@ -487,10 +487,7 @@ let jsxExprAndChildren ~component_type ~loc ~ctxt mapper ~keyProps children =
          children *)
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxs") },
         None,
-        Some
-          (match component_type with
-          | Uppercase -> children
-          | Lowercase -> Binding.React.array ~loc children) )
+        Some (Binding.React.array ~loc children))
   | None, (label, key) :: _ ->
       ( Builder.pexp_ident ~loc { loc; txt = Ldot (ident, "jsxKeyed") },
         Some (label, key),

ppx/test/upper.t/run.t

@@ -4,7 +4,10 @@
   let upper_children_single = foo =>
     React.jsx(Upper.make, Upper.makeProps(~children=foo, ()));
   let upper_children_multiple = (foo, bar) =>
-    React.jsxs(Upper.make, Upper.makeProps(~children=[|foo, bar|], ()));
+    React.jsxs(
+      Upper.make,
+      Upper.makeProps(~children=React.array([|foo, bar|]), ()),
+    );
   let upper_children =
     React.jsx(
       Page.make,

test/React__test.re

@@ -16,17 +16,15 @@ module DummyComponentThatMapsChildren = {
   [@react.component]
   let make = (~children, ()) => {
     <div>
-      {children
-       ->React.array
-       ->React.Children.mapWithIndex((element, index) => {
-           React.cloneElement(
-             element,
-             {
-               "key": string_of_int(index),
-               "role": Int.to_string(index),
-             },
-           )
-         })}
+      {children->React.Children.mapWithIndex((element, index) => {
+         React.cloneElement(
+           element,
+           {
+             "key": string_of_int(index),
+             "role": Int.to_string(index),
+           },
+         )
+       })}
     </div>;
   };
 };
@@ -170,9 +168,11 @@ describe("React", () => {
     let container =
       ReactTestingLibrary.render(
         <DummyComponentThatMapsChildren>
-          <div> 1->React.int </div>
-          <div> 2->React.int </div>
-          <div> 3->React.int </div>
+          {React.array([|
+             <div> 1->React.int </div>,
+             <div> 2->React.int </div>,
+             <div> 3->React.int </div>,
+           |])}
         </DummyComponentThatMapsChildren>,
       );
 
@@ -461,7 +461,7 @@ describe("React", () => {
 
     let container =
       ReactTestingLibrary.render(
-        <Test> {Test.name: "foo"} {name: "bar"} </Test>,
+        <Test> {[|{Test.name: "foo"}, {name: "bar"}|]} </Test>,
       );
 
     let foo = getByRole("foo", container);
@@ -470,4 +470,52 @@ describe("React", () => {
     let bar = getByRole("bar", container);
     expect(bar->innerHTML)->toBe("bar");
   });
+
+  test("Can render components with multiple children", () => {
+    module MyComponent = {
+      [@react.component]
+      let make = (~children) => {
+        <section role="container"> children </section>;
+      };
+    };
+
+    let container =
+      ReactTestingLibrary.render(
+        <MyComponent>
+          <div role="child1"> {React.string("child1")} </div>
+          <div role="child2"> {React.string("child2")} </div>
+        </MyComponent>,
+      );
+
+    let section = getByRole("container", container);
+    expect(section->tagName->Js.String.toLowerCase)->toBe("section");
+
+    let child1 = getByRole("child1", container);
+    expect(child1->innerHTML)->toBe("child1");
+
+    let child2 = getByRole("child2", container);
+    expect(child2->innerHTML)->toBe("child2");
+  });
+
+  test("Can render components with a single child", () => {
+    module MyComponent = {
+      [@react.component]
+      let make = (~children) => {
+        <section role="container"> children </section>;
+      };
+    };
+
+    let container =
+      ReactTestingLibrary.render(
+        <MyComponent>
+          <div role="child"> {React.string("child")} </div>
+        </MyComponent>,
+      );
+
+    let section = getByRole("container", container);
+    expect(section->tagName->Js.String.toLowerCase)->toBe("section");
+
+    let child = getByRole("child", container);
+    expect(child->innerHTML)->toBe("child");
+  });
 });