From 31dfa15b251bbf6b3971ae668e7d848261729c00 Mon Sep 17 00:00:00 2001
From: nojaf <florian.verdonck@outlook.com>
Date: Wed, 12 Jun 2024 15:03:05 +0200
Subject: [PATCH] Initial attempt to add something about events

---
 pages/docs/react/latest/events.mdx | 37 ++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 pages/docs/react/latest/events.mdx

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>
+  }
+}
+```