From 2cd4cf55930d3208e2c318484f6fe85f505e8f3b Mon Sep 17 00:00:00 2001 From: Jason Date: Fri, 7 Dec 2018 17:16:27 -0500 Subject: [PATCH] Updated to include a description of Fragments. This commit adds a brief description and examples of the usage of React Fragments via the `:<>` Hiccup form. --- doc/CreatingReagentComponents.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/doc/CreatingReagentComponents.md b/doc/CreatingReagentComponents.md index a559772..1d451f3 100644 --- a/doc/CreatingReagentComponents.md +++ b/doc/CreatingReagentComponents.md @@ -87,6 +87,25 @@ That isn't valid Hiccup and you'll get a slightly baffling error. You'll have to [:div name]]) ;; [:div] containing two nested [:divs] ``` +Alternatively, you could return a [React Fragment](https://reactjs.org/docs/fragments.html). In reagent, a React Fragment is created using the `:<>` Hiccup form. + +```cljs +(defn right-component + [name] + [:<> + [:div "Hello"] + [:div name]]) +``` + +Referring to the example in [React's documentation](https://reactjs.org/docs/fragments.html), the `Columns` component could be defined in reagent as: + +```cljs +(defn columns + [:<> + [:td "Hello"] + [:td "World"]] +``` + ## Form-2: A Function Returning A Function Now, let's take one step up in complexity. Sometimes, a component requires: