Skip to content

Commit 2f91a1e

Browse files
committed
Add introduction block of rendering arrays.
1 parent 5d0fa9b commit 2f91a1e

File tree

1 file changed

+20
-1
lines changed

1 file changed

+20
-1
lines changed

pages/docs/react/latest/arrays-and-keys.mdx

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,26 @@ Whenever we are transforming data into an array of elements and put it in our Re
1212

1313
</Intro>
1414

15-
## Keys & Rendering Arrays
15+
## Rendering Arrays
16+
17+
Arrays require a special function `React.array` to convert an `array<Jsx.element>` to render as `Jsx.element`.
18+
19+
```res
20+
type todo = {id: string, text: string}
21+
22+
@react.component
23+
let make = () => {
24+
let todos = [{id: "todo1", text: "Todo 1"}, {id: "todo2", text: "Todo 2"}]
25+
26+
let items = Array.map(todos, todo => {
27+
<li key={todo.id}> {React.string(todo.text)} </li>
28+
})
29+
30+
<ul> {React.array(items)} </ul>
31+
}
32+
```
33+
34+
## Keys
1635

1736
Keys help React identify which elements have been changed, added, or removed throughout each render. Keys should be given to elements inside the array to give the elements a stable identity:
1837

0 commit comments

Comments
 (0)