🔧 Allow BoxWithHeader to accept nodes instead of objects as props

code/frontend/package-lock.json

@@ -12,6 +12,7 @@
                 "@testing-library/react": "^11.2.6",
                 "@testing-library/user-event": "^12.8.3",
                 "classnames": "^2.3.1",
+                "is-string": "^1.0.5",
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2",
                 "react-scripts": "4.0.3",

code/frontend/package.json

@@ -7,6 +7,7 @@
         "@testing-library/react": "^11.2.6",
         "@testing-library/user-event": "^12.8.3",
         "classnames": "^2.3.1",
+        "is-string": "^1.0.5",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",

code/frontend/src/App.js

@@ -10,11 +10,8 @@ export default function App() {
     return (
         <div className={classNames(Style.App, theme)}>
             <BoxWithHeader
-                header={{
+                header={"Ciao mondo!"}
-                    children: "Ciao mondo!"
+                body={
-                }}
-                body={{
-                    children: (
                     <div>
                         <div>
                             Il CSS è pura magia.
@@ -23,28 +20,19 @@ export default function App() {
                             Change my mind.
                         </div>
                     </div>
-                    ),
+                }
-                }}
             />
             <BoxWithHeader
-                header={{
+                header={"Questa è un'altra Box."}
-                    children: "Questa è un'altra Box."
+                body={
-                }}
-                body={{
-                    children: (
                     <div>
                         E altro testo.
                     </div>
-                    )
+                }
-                }}
             />
             <BoxWithHeader
-                header={{
+                header={"Ecco, così va meglio."}
-                    children: "Ecco, così va meglio.",
+                body={"No."}
-                }}
-                body={{
-                    children: "No."
-                }}
             />
         </div>
     )

code/frontend/src/components/BoxWithHeader.js

@@ -1,9 +1,31 @@
-import React from "react"
+import React, {isValidElement} from "react"
 import Style from "./BoxWithHeader.module.css"
 import classNames from "classnames"
+import isString from "is-string"
 
 
-export default function BoxWithHeader({ header, body, className, ...props }) {
+export default function BoxWithHeader({ header, body, children, className, ...props }) {
+
+    if(isValidElement(header) || isString(header)) {
+        header = {
+            children: header
+        }
+    }
+
+    if(isValidElement(body) || isString(body)) {
+        body = {
+            children: body
+        }
+    }
+
+    if(children) {
+        if(body.children) {
+            throw new Error("If directly passing `children` to BoxWithHeader, body.children should not be set.")
+        }
+
+        body["children"] = children
+    }
+
     return (
         <div className={classNames(Style.BoxWithHeader, className)} {...props}>
             <div className={classNames(Style.BoxHeader, header.className)}>