diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 000000000..649ecfebd
Binary files /dev/null and b/bun.lockb differ
diff --git a/pages/docs/react/latest/arrays-and-keys.mdx b/pages/docs/react/latest/arrays-and-keys.mdx
index 56be3f290..f7b46621e 100644
--- a/pages/docs/react/latest/arrays-and-keys.mdx
+++ b/pages/docs/react/latest/arrays-and-keys.mdx
@@ -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,7 +53,7 @@ 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>
 })
 ```
@@ -42,9 +61,9 @@ let items = Belt.Array.map(todos, todo => {
 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,7 +82,7 @@ module Blog = {
     let sidebar =
       <ul>
         {
-          Belt.Array.map(posts, (post) => {
+          Array.map(posts, (post) => {
             <li key={post.id}>
               {React.string(post.title)}
             </li>
@@ -71,7 +90,7 @@ module Blog = {
         }
       </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.
 
diff --git a/pages/docs/react/latest/events.mdx b/pages/docs/react/latest/events.mdx
new file mode 100644
index 000000000..5000cd988
--- /dev/null
+++ b/pages/docs/react/latest/events.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>
+  }
+}
+```