A simple SignupForm written in ReasonML

SignupForm.re

/* `action` and `state` types must be defined before the `let component` statement for type inference to work */
type action =
  | UpdateEmail string
  | UpdatePassword string;

type state = {
  email: string,
  password: string
};

/* Wrap the variant constructor in function so they may be composed */
let updateEmail email => UpdateEmail email;

let updatePassword password => UpdatePassword password;

let component = ReasonReact.reducerComponent "Signup";

/* Or could destructure here (i.e. `let handleSubmit _ {ReasonReact.state} => Js.log state`) */
let handleSubmit _ self => Js.log self.ReasonReact.state;

let getEventTargetValue event :string => (
                                           ReactDOMRe.domElementToObj (
                                             ReactEventRe.Form.target event
                                           )
                                         )##value;

let make _children => {
  ...component,
  initialState: fun () => {email: "", password: ""},
  reducer: fun action state =>
    switch action {
    | UpdateEmail value => ReasonReact.Update {...state, email: value}
    | UpdatePassword value => ReasonReact.Update {...state, password: value}
    },
  render: fun self =>
    <div className="Login">
      <div> <h2> (ReasonReact.stringToElement "Signup here") </h2> </div>
      /* Call self.handle to access the latest value of `self.ReasonReact.state` in the callback. */
      <form onSubmit=(self.handle handleSubmit)>
        <input
          onChange=(
            self.ReasonReact.reduce (fun event => event |> getEventTargetValue |> updateEmail)
          )
          placeholder="email"
        />
        <input
          onChange=(self.reduce (fun event => event |> getEventTargetValue |> updatePassword))
          placeholder="password"
        />
        <input _type="submit" value="Register" />
      </form>
    </div>
};

Was thinking something like: onChange=(self.ReasonReact.reduce (compose UpdateEmail getEventTargetValue))

@Zerim - I'd use either of
let handleSubmit _ self => Js.log self.ReasonReact.state; or
let handleSubmit _ {ReasonReact.state} => Js.log state;
depending on actual usecase. You can explicitly type if you'd like, but self does have a lot of baggage to carry around.

Thanks @rickyvetter, forgot I could rely on type inference instead of explicitly annotating there.