loading...
Cover image for Author React Component's, like a boss.

Author React Component's, like a boss.

zoedreams profile image ☮️✝️☪️🕉☸️✡️☯️ ・2 min read

Alt Text

[ 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}
/>
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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

this.rComponent.setState({model:mewNodel});
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Alt Text

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

Discussion

pic
Editor guide