You can decouple the parent stream Component from the mapped React Component by using props.children instead. This process involves mapping the stream to React’s cloneElement with the children then passing the props in 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 }) => (  
     
    
      +    
      
{value}
    
      -  
     
)const CounterStream = componentFromStream(  props$ => {    const { stream: onInc$, handler: onInc } = createEventHandler();    const { stream: onDec$, handler: onDec } = createEventHandler();    return props$      .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 = () => (  
     
    
        
     
)render(
     , document.getElementById("root"))

 

Now inside we use:

We want pass child into it:

const App = () => (  
     
    
            
           
        
     
)

 

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)      )        .startWith(props.value)        .scan((acc, curr) => acc + curr)        .map((value) => ({ ...props, value, onInc, onDec }))      ).map(props =>        cloneElement(props.children, props)      )  });