CODEWITHSUNDEEP
javascriptreactjs
Sean
Sean

Reputation: 2577

Higher Order Component not firing wrapper render in ReactJS

I'm using a high order component that is not rendering the child on a render change. The code below has been chopped down for simplicity sake.

The HOC that looks like this:

const withMyComponent = (WrapperComponent) => {
    class HOC extends Component {
        state = {
            value: ''
        };

        changedHandler = (event) => {
            this.setState({ value: event.target.value });
        };

        render() {
            return (<WrapperComponent {...this.props}
                changed={this.changedHandler}
                value={this.state.value} />);
        }
    };

    return HOC;
};

export default withMyComponent;

Then I have a child component that uses this HOC:

class myChildComponent extends Component {
    render() {
        return (
            <input type="text"
                onChange={(event) => this.props.changed(event)}
                value={this.props.value || ''} />
        );
    };
};

export default withMyComponent(myChildComponent);

The problem I am experiencing is that the input is not updating with the new value that is passed back from the HOC. In fact, the child render is not even firing after the initial mount and doesn't seem to fire on any changed event.

I have placed debugging and console.logs in the HOC render and the changed event and the render are firing with the proper data.

So, if I type in the textbox, it fires the change event in the HOC and updates the state in the HOC and fires the render event in the HOC. But it is not firing the wrapped components render event, and thus the textbox never updates with any values.

Anyone able to solve this issue or lead me in the right direction?

Thanks again.

Upvotes: 1

Views: 408

Answers (1)

dance2die
dance2die

Reputation: 36895

You need to pass an object to this.setState

const withMyComponent = WrapperComponent => {
  class HOC extends Component {
    state = {
      value: ""
    };

    changedHandler = event => {
      // Instead of 
      // this.setState( value: event.target.value );

      // Do This.
      this.setState({ value: event.target.value });
    };

    render() { ... }
  }

  return HOC;
};

Working Demo

Edit zq6vk36z3m

Upvotes: 2

Related Questions