Skip to content

Commit c239a11

Browse files
fhammerschmidtfhammerschmidt
authored
React docs updates (#892)
* Add react examples to compilation tests and fix them * Remove warn banner * Fix closing tag
1 parent 64a4ab0 commit c239a11

24 files changed

+461
-284
lines changed

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

Lines changed: 201 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ Whenever we are transforming data into an array of elements and put it in our Re
1616

1717
Arrays require a special function `React.array` to convert an `array<Jsx.element>` to render as `Jsx.element`.
1818

19-
```res
19+
<CodeTab labels={["ReScript", "JS Output"]}>
20+
21+
```res example
2022
type todo = {id: string, text: string}
2123
2224
@react.component
@@ -31,21 +33,68 @@ let make = () => {
3133
}
3234
```
3335

36+
```js
37+
function Playground(props) {
38+
var todos = [
39+
{
40+
id: "todo1",
41+
text: "Todo 1"
42+
},
43+
{
44+
id: "todo2",
45+
text: "Todo 2"
46+
}
47+
];
48+
var items = todos.map(function (todo) {
49+
return JsxRuntime.jsx("li", {
50+
children: todo.text
51+
}, todo.id);
52+
});
53+
return JsxRuntime.jsx("ul", {
54+
children: items
55+
});
56+
}
57+
```
58+
59+
</CodeTab>
60+
3461
## Keys
3562

3663
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:
3764

38-
```res
39-
let numbers = [1, 2, 3, 4, 5];
65+
<CodeTab labels={["ReScript", "JS Output"]}>
66+
67+
```res example
68+
let numbers = [1, 2, 3, 4, 5]
4069
4170
let items = Array.map(numbers, (number) => {
4271
<li key={Int.toString(number)}> {React.int(number)} </li>
4372
})
4473
```
4574

75+
```js
76+
var numbers = [
77+
1,
78+
2,
79+
3,
80+
4,
81+
5
82+
];
83+
84+
var items = numbers.map(function (number) {
85+
return JsxRuntime.jsx("li", {
86+
children: number
87+
}, number.toString());
88+
});
89+
```
90+
91+
</CodeTab>
92+
4693
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
4794

48-
```res
95+
<CodeTab labels={["ReScript", "JS Output"]}>
96+
97+
```res prelude
4998
type todo = {id: string, text: string}
5099
51100
let todos = [
@@ -58,46 +107,78 @@ let items = Array.map(todos, todo => {
58107
})
59108
```
60109

110+
```js
111+
var todos = [
112+
{
113+
id: "todo1",
114+
text: "Todo 1"
115+
},
116+
{
117+
id: "todo2",
118+
text: "Todo 2"
119+
}
120+
];
121+
122+
var items = todos.map(function (todo) {
123+
return JsxRuntime.jsx("li", {
124+
children: todo.text
125+
}, todo.id);
126+
});
127+
```
128+
129+
</CodeTab>
130+
61131
If you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:
62132

63-
```res {1..3}
64-
let items = Array.mapWithIndex(todos, (i, todo) => {
133+
<CodeTab labels={["ReScript", "JS Output"]}>
134+
135+
```res example {1..3}
136+
let items = Array.mapWithIndex(todos, (todo, i) => {
65137
// Only do this if items have no stable id
66138
<li key={Int.toString(i)}>
67-
{todo.text}
139+
{React.string(todo.text)}
68140
</li>
69-
});
141+
})
70142
```
71143

144+
```js
145+
var items = todos.map(function (todo, i) {
146+
return JsxRuntime.jsx("li", {
147+
children: todo.text
148+
}, i.toString());
149+
});
150+
```
151+
152+
</CodeTab>
153+
154+
72155
### Keys Must Only Be Unique Among Siblings
73156

74157
Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique. We can use the same keys when we produce two different arrays:
75158

76-
```res {6,10,17,18,25,27}
159+
<CodeTab labels={["ReScript", "JS Output"]}>
160+
161+
```res example {6,10,17,18,25,27}
77162
type post = {id: string, title: string, content: string}
78163
79164
module Blog = {
80165
@react.component
81166
let make = (~posts: array<post>) => {
82167
let sidebar =
83168
<ul>
84-
{
85-
Array.map(posts, (post) => {
86-
<li key={post.id}>
87-
{React.string(post.title)}
88-
</li>
89-
})->React.array
90-
}
169+
{Array.map(posts, post => {
170+
<li key={post.id}> {React.string(post.title)} </li>
171+
})->React.array}
91172
</ul>
92173
93-
let content = Array.map(posts, (post) => {
94-
<div key={post.id}>
95-
<h3>{React.string(post.title)}</h3>
96-
<p>{React.string(post.content)}</p>
97-
</div>
98-
});
99-
100-
<div>
174+
let content = Array.map(posts, post => {
175+
<div key={post.id}>
176+
<h3> {React.string(post.title)} </h3>
177+
<p> {React.string(post.content)} </p>
178+
</div>
179+
})
180+
181+
<div>
101182
{sidebar}
102183
<hr />
103184
{React.array(content)}
@@ -106,19 +187,84 @@ module Blog = {
106187
}
107188
108189
let posts = [
109-
{id: "1", title: "Hello World", content: "Welcome to learning ReScript & React!"},
110-
{id: "2", title: "Installation", content: "You can install reason-react from npm."}
190+
{
191+
id: "1",
192+
title: "Hello World",
193+
content: "Welcome to learning ReScript & React!",
194+
},
195+
{
196+
id: "2",
197+
title: "Installation",
198+
content: "You can install reason-react from npm.",
199+
},
111200
]
112201
113-
let blog = <Blog posts/>
202+
let blog = <Blog posts />
203+
```
204+
205+
```js
206+
function Playground$Blog(props) {
207+
var posts = props.posts;
208+
var sidebar = JsxRuntime.jsx("ul", {
209+
children: posts.map(function (post) {
210+
return JsxRuntime.jsx("li", {
211+
children: post.title
212+
}, post.id);
213+
})
214+
});
215+
var content = posts.map(function (post) {
216+
return JsxRuntime.jsxs("div", {
217+
children: [
218+
JsxRuntime.jsx("h3", {
219+
children: post.title
220+
}),
221+
JsxRuntime.jsx("p", {
222+
children: post.content
223+
})
224+
]
225+
}, post.id);
226+
});
227+
return JsxRuntime.jsxs("div", {
228+
children: [
229+
sidebar,
230+
JsxRuntime.jsx("hr", {}),
231+
content
232+
]
233+
});
234+
}
235+
236+
var Blog = {
237+
make: Playground$Blog
238+
};
239+
240+
var posts = [
241+
{
242+
id: "1",
243+
title: "Hello World",
244+
content: "Welcome to learning ReScript & React!"
245+
},
246+
{
247+
id: "2",
248+
title: "Installation",
249+
content: "You can install reason-react from npm."
250+
}
251+
];
252+
253+
var blog = JsxRuntime.jsx(Playground$Blog, {
254+
posts: posts
255+
});
114256
```
115257

258+
</CodeTab>
259+
116260

117261
## Rendering `list` Values
118262

119263
In case you ever want to render a `list` of items, you can do something like this:
120264

121-
```res
265+
<CodeTab labels={["ReScript", "JS Output"]}>
266+
267+
```res example
122268
type todo = {id: string, text: string}
123269
124270
@react.component
@@ -140,6 +286,33 @@ let make = () => {
140286
141287
```
142288

289+
```js
290+
function Playground(props) {
291+
var items = Core__List.toArray({
292+
hd: {
293+
id: "todo1",
294+
text: "Todo 1"
295+
},
296+
tl: {
297+
hd: {
298+
id: "todo2",
299+
text: "Todo 2"
300+
},
301+
tl: /* [] */0
302+
}
303+
}).map(function (todo) {
304+
return JsxRuntime.jsx("li", {
305+
children: todo.text
306+
}, todo.id);
307+
});
308+
return JsxRuntime.jsx("div", {
309+
children: items
310+
});
311+
}
312+
```
313+
314+
</CodeTab>
315+
143316
We use `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.
144317

145318
99% of the time you'll want to use arrays (seamless interop, faster JS code), but in some cases it might make sense to use a `list` to leverage advanced pattern matching features etc.

0 commit comments

Comments
 (0)