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

Author: nojaf

bun.lockb

@@ -12,15 +12,34 @@ Whenever we are transforming data into an array of elements and put it in our Re
 
 </Intro>
 
-## Keys & Rendering Arrays
+## Rendering Arrays
+
+Arrays require a special function `React.array` to convert an `array<Jsx.element>` to render as `Jsx.element`.
+
+```res
+type todo = {id: string, text: string}
+
+@react.component
+let make = () => {
+  let todos = [{id: "todo1", text: "Todo 1"}, {id: "todo2", text: "Todo 2"}]
+
+  let items = Array.map(todos, todo => {
+    <li key={todo.id}> {React.string(todo.text)} </li>
+  })
+
+  <ul> {React.array(items)} </ul>
+}
+```
+
+## Keys
 
 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:
 
 ```res
 let numbers = [1, 2, 3, 4, 5];
 
-let items = Belt.Array.map(numbers, (number) => {
-  <li key={Belt.Int.toString(number)}> {React.int(number)} </li>
+let items = Array.map(numbers, (number) => {
+  <li key={Int.toString(number)}> {React.int(number)} </li>
 })
 ```
 
@@ -34,17 +53,17 @@ let todos = [
   {id: "todo2", text: "Todo 2"}
 ]
 
-let items = Belt.Array.map(todos, todo => {
+let items = Array.map(todos, todo => {
   <li key={todo.id}> {React.string(todo.text)} </li>
 })
 ```
 
 If you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:
 
 ```res {1..3}
-let items = Belt.Array.mapWithIndex(todos, (i, todo) => {
+let items = Array.mapWithIndex(todos, (i, todo) => {
   // Only do this if items have no stable id
-  <li key={Belt.Int.toString(i)}>
+  <li key={Int.toString(i)}>
     {todo.text}
   </li>
 });
@@ -63,15 +82,15 @@ module Blog = {
     let sidebar =
       <ul>
         {
-          Belt.Array.map(posts, (post) => {
+          Array.map(posts, (post) => {
             <li key={post.id}>
               {React.string(post.title)}
             </li>
           })->React.array
         }
       </ul>
 
-    let content = Belt.Array.map(posts, (post) => {
+    let content = Array.map(posts, (post) => {
         <div key={post.id}>
           <h3>{React.string(post.title)}</h3>
           <p>{React.string(post.content)}</p>
@@ -111,8 +130,8 @@ let make = () => {
 
   let items =
     todoList
-    ->Belt.List.toArray
-    ->Belt.Array.map(todo => {
+    ->List.toArray
+    ->Array.map(todo => {
       <li key={todo.id}> {React.string(todo.text)} </li>
     })
 
@@ -121,7 +140,7 @@ let make = () => {
 
 ```
 
-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.
+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.
 
 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.
 

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

@@ -0,0 +1,37 @@
+---
+title: Events
+description: "Event handlers for React elements"
+canonical: "/docs/react/latest/events"
+---
+
+# Events
+
+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.
+
+## Capture the input value onChange
+
+Depending on the event handler, the callback function will have a different type.
+Due to the dynamic nature of JavaScript, we cannot anticipate the target type on the event.
+So, we need a leap of faith to grab the input value as string.
+
+```res
+module App = {
+  @react.component
+  let make = () => {
+    let (value, setValue) = React.useState(_ => "")
+
+    <form>
+      <input
+        type_="text"
+        defaultValue={value}
+        onChange={(ev: JsxEvent.Form.t) => {
+          let target = JsxEvent.Form.target(ev)
+          let value: string = target["value"]
+          setValue(_prevValue => value)
+        }}
+      />
+      <p style={{color:"red"}}>{React.string(value)}</p>
+    </form>
+  }
+}
+```