Stop the communication between react components using mufa after a condition

Question

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 notice that in the following snippet).

const {on, fire} = mufa;
class Input extends React.Component {
   
   onChange(event) {
     fire('input_change', event.target.value);
   }

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

class Label extends React.Component {
   state= {text: ""};
   componentDidMount() {
     on('input_change', this.onInputChange.bind(this));
   }

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

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

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


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdn.rawgit.com/abdennour/mufa/ddf78fd9/cdn/mufa-latest.min.js"></script>


<div id="app" ></div>

My concern is how to stop this communication between Label and Input when the input value reaches 10 chars.

I tried this:

   onInputChange(inputValue) {


      if (inputValue.length <= 10 )  // <-- I add this.

         this.setState({text: inputValue});
    }

However , this condition does not prevent the calling of onInputChange. My target is to stop this subscription( to input_change event) when the input reaches 10 chars immediately.

Answer 1

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

const mufa = new Mufa();
const {on, fire, unsub} = mufa;
class Input extends React.Component {
   
   onChange(event) {
     fire('input_change', event.target.value);
   }

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

class Label extends React.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>
   }
}

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


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

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


<div id="app" ></div>