Skip to content

Commit fd3cd56

Browse files
authored
Add something about React events (#882)
* Remove Belt from array-and-keys.mdx * Add introduction block of rendering arrays. * Initial attempt to add something about events
1 parent e6837b5 commit fd3cd56

File tree

3 files changed

+67
-11
lines changed

3 files changed

+67
-11
lines changed

bun.lockb

423 KB
Binary file not shown.

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

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,34 @@ 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

1938
```res
2039
let numbers = [1, 2, 3, 4, 5];
2140
22-
let items = Belt.Array.map(numbers, (number) => {
23-
<li key={Belt.Int.toString(number)}> {React.int(number)} </li>
41+
let items = Array.map(numbers, (number) => {
42+
<li key={Int.toString(number)}> {React.int(number)} </li>
2443
})
2544
```
2645

@@ -34,17 +53,17 @@ let todos = [
3453
{id: "todo2", text: "Todo 2"}
3554
]
3655
37-
let items = Belt.Array.map(todos, todo => {
56+
let items = Array.map(todos, todo => {
3857
<li key={todo.id}> {React.string(todo.text)} </li>
3958
})
4059
```
4160

4261
If you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:
4362

4463
```res {1..3}
45-
let items = Belt.Array.mapWithIndex(todos, (i, todo) => {
64+
let items = Array.mapWithIndex(todos, (i, todo) => {
4665
// Only do this if items have no stable id
47-
<li key={Belt.Int.toString(i)}>
66+
<li key={Int.toString(i)}>
4867
{todo.text}
4968
</li>
5069
});
@@ -63,15 +82,15 @@ module Blog = {
6382
let sidebar =
6483
<ul>
6584
{
66-
Belt.Array.map(posts, (post) => {
85+
Array.map(posts, (post) => {
6786
<li key={post.id}>
6887
{React.string(post.title)}
6988
</li>
7089
})->React.array
7190
}
7291
</ul>
7392
74-
let content = Belt.Array.map(posts, (post) => {
93+
let content = Array.map(posts, (post) => {
7594
<div key={post.id}>
7695
<h3>{React.string(post.title)}</h3>
7796
<p>{React.string(post.content)}</p>
@@ -111,8 +130,8 @@ let make = () => {
111130
112131
let items =
113132
todoList
114-
->Belt.List.toArray
115-
->Belt.Array.map(todo => {
133+
->List.toArray
134+
->Array.map(todo => {
116135
<li key={todo.id}> {React.string(todo.text)} </li>
117136
})
118137
@@ -121,7 +140,7 @@ let make = () => {
121140
122141
```
123142

124-
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.
143+
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.
125144

126145
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.
127146

pages/docs/react/latest/events.mdx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: Events
3+
description: "Event handlers for React elements"
4+
canonical: "/docs/react/latest/events"
5+
---
6+
7+
# Events
8+
9+
React lets you add event handlers to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing form inputs, and so on.
10+
11+
## Capture the input value onChange
12+
13+
Depending on the event handler, the callback function will have a different type.
14+
Due to the dynamic nature of JavaScript, we cannot anticipate the target type on the event.
15+
So, we need a leap of faith to grab the input value as string.
16+
17+
```res
18+
module App = {
19+
@react.component
20+
let make = () => {
21+
let (value, setValue) = React.useState(_ => "")
22+
23+
<form>
24+
<input
25+
type_="text"
26+
defaultValue={value}
27+
onChange={(ev: JsxEvent.Form.t) => {
28+
let target = JsxEvent.Form.target(ev)
29+
let value: string = target["value"]
30+
setValue(_prevValue => value)
31+
}}
32+
/>
33+
<p style={{color:"red"}}>{React.string(value)}</p>
34+
</form>
35+
}
36+
}
37+
```

0 commit comments

Comments
 (0)