DEV Community

Srikanth Kyatham
Srikanth Kyatham

Posted on

Rescript pass React Component.make as a prop

// --file status.res
module type SComponentType = {
  type data
}
module SComponent = (Config: SComponentType) => {
  type component = {"data": Config.data} => React.element

  @react.component
  let make = (
    ~status,
    ~componentMake: component,
    ~data: Config.data,
    ~errorText: option<string>=?,
    ~errorComponent: option<React.element>=?,
  ) => {
     let actualErrorComponent = switch (errorComponent, errorText) {
    | (Some(errorComponent), None) => errorComponent
    | _ =>
      switch errorText {
      | Some(errorText) => React.string(errorText)
      | _ => React.null
      }
    }

    switch status {
    | "success" => React.createElement(componentMake, {"data": data})
    | _ => <> {actualErrorComponent} </>
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

I wish to pass component which is not constructed yet but to be constructed only when the status == "success"

Inorder to do that I need to pass Component.make

Lets say I have component

// -- file: name.res
@react.component
let make = (~name: string) => {
  <div>{React.string(name)}</div>
}
Enter fullscreen mode Exit fullscreen mode

In order to pass the component as a prop to

I would pass it as

module StatusComponentType = {
  type data = string
}
module StatusFunctor = Status.SComponent(StatusComponentType)

<StatusFunctor
 componentMake={Name.make}
 data=string
/>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)