Upgrading to 0.9.0 prevents extensions, what is the recommended fix?

[pickhardt]

After upgrading to 0.9.0, I'm getting an error "Cannot add property "hideModal", object is not extensible." I also see the warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

I've been previously added some properties to the children props inside render:

render: function() {
  var childrenWithModalProps = [].concat(this.props.children);
  for (var i = 0; i < childrenWithModalProps.length; i++) {
    childrenWithModalProps[i].props["hideModal"] = this.hideModal;
    childrenWithModalProps[i].props["showModal"] = this.showModal;
  }
  ...

I understand the problem is you're using preventExtensions or whatever to prevent extensions of props inside render. Where am I supposed to extend the props then? Is there a beforeRender or something I can use to accomplish this?

[ide]

You should use cloneElement:

React.cloneElement(child, {
  hideModal: this.hideModal,
  showModal: this.showModal,
})

The principle is that an element's props should be set only by its owner, which created the element.

(FYI questions about React are better suited for the main repo at https://github.com/facebook/react/)

[pickhardt]

OK, yeah I didn't realize it was a React issue cause it happened when I upgraded RN.

Do you know why that is? It seems wasteful to potentially clone a ton of elements.

[ide]

There's some discussion here about freezing props: facebook/react#1753. I think it boils down to avoiding shared mutable state.

[pickhardt]

I see. Thanks.