49
module CounterMessage = {
@react.component
let make = (~count, ~username=?) => {
let times = switch count {
| 1 => "once"
| 2 => "twice"
| n => Int.toString(n) ++ " times"
}
let name = switch username {
| Some("") => "Anonymous"
| Some(name) => name
| None => "Anonymous"
}
<div> {React.string(`Hello ${name}, you clicked me ` ++ times)} </div>
}
}
module App = {
@react.component
let make = () => {
let (count, setCount) = React.useState(() => 0)
let (username, setUsername) = React.useState(() => "Anonymous")
<div>
{React.string("Username: ")}
<input
type_="text"
value={username}
onChange={event => {
event->ReactEvent.Form.preventDefault
let eventTarget = event->ReactEvent.Form.target
let username = eventTarget["value"]
setUsername(_prev => username)
}}
/>
<button
onClick={_evt => {
setCount(prev => prev + 1)
}}>
{React.string("Click me")}
</button>
<button onClick={_evt => setCount(_ => 0)}> {React.string("Reset")} </button>
<CounterMessage count username />
</div>
}
}
⣿
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