Skip to content

Commit 3496595

Browse files
authored
Merge pull request #458 from a-c-sreedhar-reddy/fix/render-list-example
2 parents f8a073b + 231aec7 commit 3496595

File tree

1 file changed

+16
-13
lines changed

1 file changed

+16
-13
lines changed

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -101,21 +101,24 @@ In case you ever want to render a `list` of items, you can do something like thi
101101

102102
```res
103103
type todo = {id: string, text: string}
104-
let todoList = list{
105-
{id: "todo1", text: "Todo 1"},
106-
{id: "todo2", text: "Todo 2"}
107-
}
108104
109-
let items =
110-
todoList
111-
->Belt.List.toArray
112-
->Belt.List.map((todo) => {
113-
<li key={todo.id}>
114-
{React.string(todo.text)}
115-
</li>
116-
})
105+
@react.component
106+
let make = () => {
107+
let todoList = list{
108+
{id: "todo1", text: "Todo 1"},
109+
{id: "todo2", text: "Todo 2"},
110+
}
111+
112+
let items =
113+
todoList
114+
->Belt.List.toArray
115+
->Belt.Array.map(todo => {
116+
<li key={todo.id}> {React.string(todo.text)} </li>
117+
})
118+
119+
<div> {React.array(items)} </div>
120+
}
117121
118-
<div> {React.array(items)} </div>
119122
```
120123

121124
We use `Belt.List.toArray` to convert our list to an array before creating our `array<React.element>`. Please note that using `list` has performance impact due to extra conversion costs.

0 commit comments

Comments
 (0)