Skip to content
This repository has been archived by the owner on Dec 13, 2023. It is now read-only.

Commit

Permalink
Some rewording
Browse files Browse the repository at this point in the history
  • Loading branch information
ZoteTheMighty committed Jan 3, 2019
1 parent 4375204 commit 16cd099
Showing 1 changed file with 3 additions and 5 deletions.
8 changes: 3 additions & 5 deletions docs/advanced/fragments.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
!!! info
This section is a work in progress.

Fragments are a tool for organizing components without unnecessary nesting.

Typically, Roact components will render a single element by returning the result of a call to `createElement`.
Fragments are a tool for avoiding unnecessary nesting when organizing components. Typically, Roact components will render a single element by returning the result of a call to `createElement`.

For example, suppose for a multiplayer game we define a list component like this:
```lua
Expand Down Expand Up @@ -44,7 +42,7 @@ Frame:
TextLabel
```

Suppose we'd instead like to create a Roact component that renders a collection of elements. That sort of component could be used to inject items into a list or frame without additional nesting. That's where `Roact.createFragment` comes in:
Suppose we'd instead like to create a Roact component that renders a collection of elements. That sort of component could be used to inject items into a list or frame without additional nesting. That's where fragments come in:
```lua hl_lines="2"
local function ListItems(props)
return Roact.createFragment({
Expand All @@ -58,7 +56,7 @@ local function ListItems(props)
end
```

When used in combination with the above `TeamList` component, this will generate the desired Roblox hierarchy:
We call `Roact.createFragment` and provide it a table of elements. When used in combination with the above `TeamList` component, this will generate the desired Roblox hierarchy:
```
Frame:
UIListLayout
Expand Down

0 comments on commit 16cd099

Please sign in to comment.