Response to a higher level Component components reprocess the wrapped component

Question

I am trying to figure out how to properly implement this validation behavior in a higher order component.

=============================================

EDIT: TL; DR: thanks to @ noa-dev user great suggestion. I created a "Responsive Script" here: https://jsfiddle.net/8nLumb74/1/ to show the problem.

Simply put: Why does my text box stop focusing on editing when this HOC completes?

What am I doing wrong?

Textbox Component:

import React from 'react' export default React.createClass({ changeText(e) { if (this.props.validate) this.props.validate(e.target.value) this.props.update(e.target.value) }, componentDidMount() { console.log('should only be fired once') }, render() { return (<input type="text" value={this.props.text} onChange={this.changeText} />) } }) 

Validator Component:

 import React from 'react' export default function (WrappedComponent) { const Validation = React.createClass({ validate(text) { console.log('validating', text) }, render() { return ( <WrappedComponent {...this.props} validate={this.validate} /> ) } }) return Validation } 

Parent component of the form:

 import React from 'react' import TextBox from './text-box' import Validator from './validator' export default React.createClass({ getInitialState() { return ({text: 'oh hai'}) }, update(text) { this.setState({text}) }, render() { const ValidatingTextBox = Validator(TextBox) return (<ValidatingTextBox text={this.state.text} update={this.update} />) } }) 

Answer 1

In the render method of the Form component, each time you create a new ValidatingTextBox :

  render() { const ValidatingTextBox = Validator(TextBox) return (<ValidatingTextBox text={this.state.text} update={this.update} />) } 

Instead, you should make a component and then use it so that the instance is supported. A possible Form component would look like this:

 import React from 'react' import TextBox from './text-box' import Validator from './validator' const ValidatingTextBox = Validator(TextBox) export default React.createClass({ getInitialState() { return ({text: 'oh hai'}) }, update(text) { this.setState({text}) }, render() { return (<ValidatingTextBox text={this.state.text} update={this.update} />) } })