Reason react Javascript Object as Props

reasonreact
#1

Im receiving user Identification props from firebase and passing it as props to my Reason component, the props look like so

user: {
  uid: "xxxx",
  email: "xxx@gmail.com",
  displayName: "name XXX"
}

The problem is I can’t read properties of the user prop
Here’s my reason react component

type action =
  | Add
  | Minus;

let ste = ReasonReact.string;

type user = {. uid: string};

type account =
  | None
  | Accountprops(user);

[@bs.deriving abstract]
type jsProps = {
  user: account,
  loginFn: unit => unit,
};

let component = ReasonReact.reducerComponent("Cartcomponent");

let make = (~user, ~loginFn, _children) => {
  ...component,
  initialState: () => 0,
  reducer: (action, state) =>
    switch (action) {
    | Add => ReasonReact.Update(state + 1)
    | Minus => ReasonReact.Update(state - 1)
    },
  render: self => {
    let countMsg = "Count: " ++ string_of_int(self.state);
    <div>
      <p> (ReasonReact.string(countMsg)) </p>
      <MaterialUi_Button onClick=(_event => self.send(Add))>
        (ReasonReact.string("Add"))
      </MaterialUi_Button>
      (
        switch (user) {
        | None =>
          <MaterialUi_Button onClick=(_event => loginFn())>
            (ReasonReact.string("Sign In"))
          </MaterialUi_Button>
        | Accountprops(response) =>
          <MaterialUi_Button onClick=(_event => Js.log(response))>
            (ReasonReact.string("Buy as"))
          </MaterialUi_Button>
        }
      )
    </div>;
  },
};

let default =
  ReasonReact.wrapReasonForJs(~component, jsProps =>
    make(~user=jsProps |. user, ~loginFn=jsProps |. loginFn, [||])
  );

On clicking the button with the buy as label I get

response === undefined

This is how the component receives its props

<Cartcomponent user={safeUser} loginFn={this.handleLogin} />;

The user can either be an object or null

Looking for recommendations for current ReasonReact tutorials
#2

You’re making a custom type that contains a None constructor, which I don’t think is what you want.
I think you probably want

type jsProps = {
  user: option(user),
  loginFn: unit => unit,
};
#3

I see… What if I want to display the uid ,

      (
        switch (user) {
        | None =>
          <MaterialUi_Button onClick=(_event => loginFn())>
            (ReasonReact.string("Sign In"))
          </MaterialUi_Button>
        | Some(response) =>
          <MaterialUi_Button onClick=(_event => Js.log(response))>
            (ReasonReact.string(response.uid))
          </MaterialUi_Button>
        }
      )

doesnt work

neither does


/****/
   <MaterialUi_Button onClick=(_event => Js.log(response))>
           (ReasonReact.string(response##uid))
   </MaterialUi_Button>

/****/

nor this


<MaterialUi_Button onClick=(_event => Js.log(response))>
            (ReasonReact.string(response#uid))
</MaterialUi_Button>
#4

Where does response come from ?

#5

Its just a name I gave the non null user object.
The user prop comes from a js file (firebase)

#6

The only example Ive seen that resembles this use case is this one …

But it uses a string and not a Js Object