Stop The Communication Between React Components Using Mufa After A Condition

I am using the sub/pub pattern via mufa to make communication between React components instead of props. Then, we will mitigate the logic in the Parent component (as you will notic

Solution 1:

It looks like mufa has a way to unsubscribe like this:

const mufa = newMufa();
const {on, fire, unsub} = mufa;
classInputextendsReact.Component {
   
   onChange(event) {
     fire('input_change', event.target.value);
   }

   render() {
     return<inputonChange={this.onChange.bind(this)} />
   }
}

classLabelextendsReact.Component {
   state= {text: ""};
   constructor(props) {
        super(props);
        this.sub = null;
   }
   componentDidMount() {
     this.sub = on('input_change', this.onInputChange.bind(this));
 
   }

   onInputChange(inputValue) {

      if(inputValue.length >= 10) {
       unsub(this.sub);
       return;
      };

      this.setState({text: inputValue});
      // I need code to stop calling this method when inputValue reaches 10 characters. 
       
    }

   render() {
     return<label > {this.state.text} </label>
   }
}

classAppextendsReact.Component {
   // No logic here thanks to the Sub/Pub pattern. render() {
     return (
        <div><Label /><Input/></div>
     )
   }
}


ReactDOM.render(<App />, document.getElementById('app'));

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><scriptsrc="https://abdennour.github.io/mufa/mufa-latest.min.js"></script><divid="app" ></div>