DocsPlaygroundBlogCommunity
  • Playground
  • Blog
  • Community
  • X
  • Bluesky
  • GitHub
  • Forum
49
 
1
module CounterMessage = {
2
  @react.component
3
  let make = (~count, ~username=?) => {
4
    let times = switch count {
5
    | 1 => "once"
6
    | 2 => "twice"
7
    | n => Int.toString(n) ++ " times"
8
    }
9
​
10
    let name = switch username {
11
    | Some("") => "Anonymous"
12
    | Some(name) => name
13
    | None => "Anonymous"
14
    }
15
​
16
    <div> {React.string(`Hello ${name}, you clicked me ` ++ times)} </div>
17
  }
18
}
19
​
20
module App = {
21
  @react.component
22
  let make = () => {
23
    let (count, setCount) = React.useState(() => 0)
24
    let (username, setUsername) = React.useState(() => "Anonymous")
25
​
26
    <div>
27
      {React.string("Username: ")}
28
      <input
29
        type_="text"
30
        value={username}
31
        onChange={event => {
32
          event->ReactEvent.Form.preventDefault
33
          let eventTarget = event->ReactEvent.Form.target
34
          let username = eventTarget["value"]
35
          setUsername(_prev => username)
36
        }}
37
      />
38
      <button
39
        onClick={_evt => {
40
          setCount(prev => prev + 1)
41
        }}>
42
        {React.string("Click me")}
43
      </button>
44
      <button onClick={_evt => setCount(_ => 0)}> {React.string("Reset")} </button>
45
      <CounterMessage count username />
46
    </div>
47
  }
48
}
49
​
⣿

React

Create a React component called 'App' if you want to render it here, then click 'Run' or enable 'Auto-run'.


Console

Add some 'Console.log' to your code and click 'Run' or enable 'Auto-run' to see your logs here.

Setup failed: Could not load compiler from url /playground-bundles/v11.1.4/compiler.js
Setup failed: Could not load compiler from url /playground-bundles/v11.1.4/compiler.js