How to transfer props to childs?

JS exmaple:

import cx from 'classNames'

const Foo = (props) => (
  <div {...props} className={cx("my-best-class", props.className)} />
)

const App = () => {
  return (
    <main><Foo onClick={...} className={...} id="..." /></main>
  )
}

React.CloneElement could be used here. https://rescript-lang.org/docs/react/latest/elements-and-jsx#cloning-elements

1 Like

Thanks. I thought that exists syntax similar JS with spreads.

So, I checked and I can’t make wrapper for dom elements. I need write makeProps for all domProps…

UP! Maybe any ideas?

I suspect for type safety you might need to separate React component props and dom props.

It’s not the idea you were hoping for, but would something like this work for you? Separating React props from dom props and using cloneElement as mentioned by @a-c-sreedhar-reddy.

module Foo = {
  @react.component
  let make = (~text: string, ~className: string, ~domProps: ReactDOM.domProps) => {
    let el = <div className={"my-best-class " ++ className}> {text->React.string} </div>
    React.cloneElement(el, domProps)
  }
}

let domProps = ReactDOM.domProps(~id="myid", ~onClick={Js.log}, ())
let el = <Foo text="Hello" className="myclass" domProps={domProps} />
1 Like

Sad…I think that need have possibility to merge types like in TS – type C = A & B
Maybe I wrong…

1 Like

To me kevanstannard’s solution looks like the better approach. It cleanly separates component props from DOM element props and avoids using potentially expensive object spread.

By the way, ReScript does have type spreading: Object | ReScript Language Manual

But it doesn’t actually work for prop spreading for other reasons.

I think that clone element is more expensive than merge two objects

1 Like