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>;


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">

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

And in the child component class constructor, RComponent.js

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

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


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 ;)


Posted on by:

zoedreams profile



Mac girl, gamer, and programmer. <3 Unity, Graphics, Art, Techno, & Blackholes. My heroes are Einstein, Hawkin, and Sagan. If i could have any superpower, it would be the ability to control time.


markdown guide