[ Picture courtesy of The Adventures of Business Cat, https://www.businesscatcomic.com/ ]

Be Boss!

I'' kép tš s0rt 'n unverbossly, because it simple and powerful.

Given RComponent is <React.Component> ;

<RComponent
  resource={this.state.resource}
  model={this.state.model}
/>

We want to update the model and resource when the parent component changes, propagation anyone?

Common problem, with infinite ways to do it.

Do this. Notice the added set property; which in fact is actually a function injected into a property! Now let's look at our RComponent lurking in its natural wild environment.

getRComponentContent() {
  return (
    <div id="rComponent-xxx"
      className="component r xxx">
      <RComponent
        resource={this.state.resource}
        model={this.state.model}
        set={this.setRComponent}
      />
    </div>
  );
}

setRComponent = component => {
  this.rComponent = component;
};

And in the child component class constructor, RComponent.js

export class RComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      resource: props.resource,
      model: props.model
    };
    this.props.set(this);
  }
}

Now from your parent you can access the scope of your child RComponent for. For example:

this.rComponent.setState({model:mewNodel});

BUT; do not fux with the props. leave those alone. You can have anythin but that.

You can however mess with say child objects of the props.resources ! which is crazy right..

If you read the source code of React you will understand the power of the dark side and why it will destroy all whom do not respect responsible code ;)

GL;HC Kara

This post is also available on DEV.