ReactJS: Where does "props" come from?

I’m currently doing the official reactJS tutorial:
https://reactjs.org/tutorial/tutorial.html#passing-data-through-props

I already like reactJS, although I definitely don’t understand everything thats going on yet.
One of those things is “props”. I’m familiar with OOP and I know what properties are. I also have at least some understanding about inheritance.
However, what’s setting me of is that seemingly, “props” comes out of nowhere here:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

Usually, when I fiddled around with OOP in Javascript, I made my classes inherit by putting the parent object into the parameter when instantiating an object, for example:

var ParentObjectInstance = new ParentObject()
var ChildObjectInstance = new ChildObject(ParentObjectInstance)

I never used the “X extends Y” syntax, which uses super inside the constructor, like in the tutorials code above.
However, after I understood what super() does (calling the parent’s constructor), I wondered where the “props” in the childs constructor parameter come from? Oo

In the whole tutorial code, no object is ever instantiated from the classes, see here:
https://codepen.io/gaearon/pen/gWWZgR?editors=0010

Therefore, I wondered how the childs constructor parameter can ever be filled by anything? Oo

41 thoughts on “ReactJS: Where does "props" come from?”

  1. Hiya! I know this is kinda off topic however I’d figured I’d ask.
    Would you be interested in trading links or maybe guest authoring a blog article or vice-versa?
    My blog addresses a lot of the same topics as yours and I believe we could greatly benefit from each other.
    If you might be interested feel free to shoot me an e-mail.
    I look forward to hearing from you! Terrific blog by the
    way!

    Reply
  2. Right here is the right webpage for everyone who wishes to
    find out about this topic. You realize a whole lot its almost hard to argue with you (not that I personally
    will need to…HaHa). You certainly put a fresh spin on a topic that has been discussed
    for a long time. Excellent stuff, just wonderful!

    Reply
  3. Simply want to say your article is as surprising. The clarity in your post is just cool and i could assume you are an expert on this subject.
    Well with your permission let me to grab your feed to keep up to date with forthcoming post.

    Thanks a million and please carry on the enjoyable work.

    Reply
  4. You are so awesome! I do not suppose I have read anything like this before.

    So nice to find someone with unique thoughts on this issue.
    Really.. many thanks for starting this up.
    This site is something that’s needed on the internet,
    someone with a little originality!

    Reply

Leave a Comment