[Recompose] Stream Props to React children with RxJS

You can decouple the parent stream Component from the mapped React Component by using props.children instead. This process is involves mapping the stream to React's and the then cloneElement children passing the props manually.

We have the code below:

Import React from "React"Import {render} from"React-dom"Import {Observable} from"Rxjs"Import config from"Recompose/rxjsobservableconfig"Import {setobservableconfig, Componentfromstream, Createeventhandler} from"Recompose"setobservableconfig (config) const Counter= ({value, Oninc, ondec}) = = (  <div> <button onclick={oninc}>+</button> ) Const Counterstream=Componentfromstream (props$={const {stream:oninc$, handler:oninc}=Createeventhandler (); const {stream:ondec$, HANDLER:ONDEC}=Createeventhandler (); returnprops$. Switchmap (Propos=Observable.merge (Oninc$.mapto (1), Ondec$.mapto (-1) . Startwith (propos.value). Scan (ACC, Curr)= + ACC +Curr). Map ((value)=({value, Oninc, Ondec}))) . Map (Counter)}); const APP= () + = (  <div><counterstream value={3}/></div>) Render (<app/>, document.getElementById ("root"))

Now inside we use:

<counterstream value={4}/>

We want pass child into it:

Const APP = () = (  <div>    <counterstream value={3}>      <counter/>    </ counterstream>  </div>)

So now, instead we map to Counter map in the JXS, we want to clone the child Elemenet and pass down new props:

 Const Counterstream = Componentfromstream (props$  => {const {stream:oninc$, handler:oninc}  = Createeventhandler ();    const {stream:ondec$, Handler:ondec}  = Createeventhandler ();  return   props$. Switchmap (Props => Observable.merge (Oninc$.mapto ( 1), Ondec$.mapto ( -1=> acc + Curr). Map ((value)  => ({... pr OPS, value, Oninc, Ondec})). Map (props  => Cloneelement (Props.childre N, props)});  

[Recompose] Stream Props to React children with RxJS