Rescript + react accepting unknown props

bmanth60 · January 17, 2021, 1:17am

I am switching a reason react component into rescript, and previously I was able to push unknown props (React synthetic events) into a third party component. Now, I am getting a type error. I am a newb and was wondering if there is any way to force a third party component to accept unknown props or do I have to recreate the component myself?

Thanks!

yawaramin · January 17, 2021, 7:24am

Can you paste the error here?

bmanth60 · January 17, 2021, 9:18am

The full error is:

mru_1  |   The function applied to this argument has type
mru_1  |     (
mru_1  |   ~?component: MaterialUi.TextField.Component.t,
mru_1  |   ~?focused: bool,
mru_1  |   ~?style: ReactDOMRe.Style.t,
mru_1  |   ~?autoComplete: string,
mru_1  |   ~?autoFocus: bool,
mru_1  |   ~?children: 'a,
mru_1  |   ~?classes: MaterialUi.TextField.Classes.t,
mru_1  |   ~?className: string,
mru_1  |   ~?color: [#Primary | #Secondary],
mru_1  |   ~?defaultValue: MaterialUi.TextField.DefaultValue.t,
mru_1  |   ~?disabled: bool,
mru_1  |   ~?error: bool,
mru_1  |   ~?_FormHelperTextProps: {..},
mru_1  |   ~?helperText: React.element,
mru_1  |   ~?hiddenLabel: bool,
mru_1  |   ~?id: string,
mru_1  |   ~?_InputLabelProps: {..},
mru_1  |   ~?inputProps: {..},
mru_1  |   ~?_InputProps: {..},
mru_1  |   ~?label: React.element,
mru_1  |   ~?margin: [#Dense | #None | #Normal],
mru_1  |   ~?multiline: bool,
mru_1  |   ~?name: string,
mru_1  |   ~?onBlur: ReactEvent.Focus.t => unit,
mru_1  |   ~?onChange: ReactEvent.Form.t => unit,
mru_1  |   ~?onFocus: ReactEvent.Focus.t => unit,
mru_1  |   ~?required: bool,
mru_1  |   ~?rows: MaterialUi.TextField.Rows.t,
mru_1  |   ~?rowsMax: MaterialUi.TextField.RowsMax.t,
mru_1  |   ~?select: bool,
mru_1  |   ~?_SelectProps: {..},
mru_1  |   ~?size: [#Medium | #Small],
mru_1  |   ~?_type: string,
mru_1  |   ~?value: MaterialUi.TextField.Value.t,
mru_1  |   ~?variant: [#Filled | #Outlined | #Standard],
mru_1  |   ~?key: string,
mru_1  |   ~?ref: ReactDOMRe.domRef,
mru_1  |   ~?key: string,
mru_1  | ) => {
mru_1  |   "_FormHelperTextProps": option<{..}>,
mru_1  |   "_InputLabelProps": option<{..}>,
mru_1  |   "_InputProps": option<{..}>,
mru_1  |   "_SelectProps": option<{..}>,
mru_1  |   "_type": option<string>,
mru_1  |   "autoComplete": option<string>,
mru_1  |   "autoFocus": option<bool>,
mru_1  |   "children": option<'a>,
mru_1  |   "className": option<string>,
mru_1  |   "classes": option<MaterialUi.TextField.Classes.t>,
mru_1  |   "color": option<[#Primary | #Secondary]>,
mru_1  |   "component": option<MaterialUi.TextField.Component.t>,
mru_1  |   "defaultValue": option<MaterialUi.TextField.DefaultValue.t>,
mru_1  |   "disabled": option<bool>,
mru_1  |   "error": option<bool>,
mru_1  |   "focused": option<bool>,
mru_1  |   "fullWidth": option<bool>,
mru_1  |   "helperText": option<React.element>,
mru_1  |   "hiddenLabel": option<bool>,
mru_1  |   "id": option<string>,
mru_1  |   "inputProps": option<{..}>,
mru_1  |   "key": option<string>,
mru_1  |   "label": option<React.element>,
mru_1  |   "margin": option<[#Dense | #None | #Normal]>,
mru_1  |   "multiline": option<bool>,
mru_1  |   "name": option<string>,
mru_1  |   "onBlur": option<ReactEvent.Focus.t => unit>,
mru_1  |   "onChange": option<ReactEvent.Form.t => unit>,
mru_1  |   "onFocus": option<ReactEvent.Focus.t => unit>,
mru_1  |   "placeholder": option<string>,
mru_1  |   "ref": option<ReactDOMRe.domRef>,
mru_1  |   "required": option<bool>,
mru_1  |   "rows": option<MaterialUi.TextField.Rows.t>,
mru_1  |   "rowsMax": option<MaterialUi.TextField.RowsMax.t>,
mru_1  |   "select": option<bool>,
mru_1  |   "size": option<[#Medium | #Small]>,
mru_1  |   "style": option<ReactDOMRe.Style.t>,
mru_1  |   "value": option<MaterialUi.TextField.Value.t>,
mru_1  |   "variant": option<[#Filled | #Outlined | #Standard]>
mru_1  | ,}
mru_1  | This argument cannot be applied with label ~onKeyPress

I believe it is because the label is not specified on the component: https://github.com/jsiebern/bs-material-ui/blob/075b1991c8365b8cb10182ff40b5c9a0578d0d06/public/bs-material-ui/src/MaterialUi_TextField.re

However, the event exists on the element beyond this type binding. I want to force unknown props to be pushed through to the underlying component. It currently works with a reason script, but when I try to use rescript instead, it fails with that error.

a-c-sreedhar-reddy · January 17, 2021, 3:38pm

You can try React cloneElement I guess.

github.com

reasonml/reason-react/blob/master/docs/clone-element.md

---
title: cloneElement
---

<aside class="warning">
The Record API is in feature-freeze. For the newest features and better support going forward, please consider migrating to the new <a href="https://reasonml.github.io/reason-react/docs/en/components">function components</a>.
</aside>

Signature: `let cloneElement: (reactElement, ~props: Js.t({..})=?, 'anyChildrenType) => reactElement`

Same as ReactJS' [cloneElement](https://reactjs.org/docs/react-api.html#cloneelement). However, adding extra props to a ReasonReact component doesn't make sense; you'd use a [**render prop**](https://reactjs.org/docs/render-props.html). Therefore, `ReasonReact.cloneElement` is only used in edge-cases to convert over existing code.

```reason
let clonedElement =
  ReasonReact.cloneElement(
    <div className="foo" />,
    ~props={"payload": 1},
    [||]
  );
```

This file has been truncated. show original

bmanth60 · January 17, 2021, 8:09pm

Oh yeah, great idea, thanks!