0

I am using bs-material-ui-icon binding, but I am given type error when try to use it component.

module Cell = {
  type status =
    | Empty
    | Tick
    | Cross;
  /* let icon =  React.createElement(MaterialUIIcons.AccessAlarm); */

  [@react.component]
  let make = _children => {
    <div> <MaterialUIIcons.AccessAlarm /> </div>; /** <MaterialUIIcons.AccessAlarm /> erorr **/
  };
};

Here is the error message it gave:

This expression has type
         'a =>
         ReasonReact.component(ReasonReact.stateless,
                                ReasonReact.noRetainedProps,
                                ReasonReact.actionless)
       but an expression was expected of type
         React.component('a) = 'a => React.element
       Type
         ReasonReact.component(ReasonReact.stateless,
                                ReasonReact.noRetainedProps,
                                ReasonReact.actionless)
           =
           ReasonReact.componentSpec(ReasonReact.stateless,
                                      ReasonReact.stateless,
                                      ReasonReact.noRetainedProps,
                                      ReasonReact.noRetainedProps,
                                      ReasonReact.actionless)
       is not compatible with type React.element

I am using react-jsx 3 (if this matter)

glennsl
  • 28,186
  • 12
  • 57
  • 75
Jack Ng
  • 473
  • 7
  • 14
  • 1
    My guess is that this is because `MaterialUIIcons` uses JSXv2 components, which you can't directly mix with JSXv3. As I understand, you have to wrap it using [`ReasonReactCompat.wrapReasonReactForReact`](https://github.com/reasonml/reason-react/blob/master/src/ReasonReactCompat.rei#L9-L14), but I haven't tried to do so yet myself. – glennsl Jun 06 '19 at 19:59
  • Your `make` function also shouldn't have a `_children` argument. It should either be `~children`, or not be present at all. – glennsl Jun 06 '19 at 20:00
  • There's a PR with proper documentation for `ReasonReactCompat` [here](https://github.com/reasonml/reason-react/pull/424/files?short_path=1eb83a7#diff-1eb83a7601b887a03489bb20d9f14643). It's just been sitting there unmerged for a month or so, which is unfortunately par for the course in Reason-land. – glennsl Jun 06 '19 at 21:13

1 Answers1

1

Like @glennsl said, this is because you're missing JSXv2 and JSXv3. There is a new branch that supports JSXv3 which you can find here https://github.com/jsiebern/bs-material-ui/tree/hooks . It was published on npm in hooks tag.

thangngoc89
  • 1,400
  • 11
  • 14