I'm currently doing the official reactJS 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" es 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>
    );
  }
}

I'm currently doing the official reactJS tutorial: https://reactjs/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" es 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 e 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

• javascript
• reactjs

• this.props.value will return a value if your current Class is imported to another ponent and in that ponent, <Square value="something"/> is used! – Faisal Alvi Commented Aug 16, 2018 at 11:16
• But this still doesn't answer my question as to where "props", located in the parameter of the constructor, does e from. – ForeFather321 Commented Aug 16, 2018 at 11:22

3 Answers 3

I'm familiar with OOP and I know what properties are.

React props are not OO properties.

However, what's setting me of is that seemingly, "props" es out of nowhere here

constructor(props) {
    ...
}

You are defining a function. props is the name given to the first argument. As always, you can name an argument whatever you like.

(props is a sensible name here because the super constructor will assign the value of it to this.props later on).

The value of the argument is determined by the code which calls the function, which isn't in the code you've quoted.

Keep reading the tutorial. The part you are on is explaining how to make a ponent that can do something with the props it is passed.

Later it shows you how to use that ponent.

In the whole tutorial code, no object is ever instantiated from the classes

Yes, it is. It just uses JSX syntax to do it:

renderSquare(i) {
    return <Square value={i} />;
}

The props are passed as attributes in the JSX that loads the ponent.

"props" doesn't came from parent.

It has set in this.props of child's class

Also it's constructors parameter of child's class.

For available "props" in parents constructor, you must send it when call super() in constructor.

Like this:

constructor(props){
    super(props);
}

And about parent:

If you want to define class inhabit parent use this:

class Child extends Parent {

You have used following line in your code

class Square extends React.Component {

You can create Square2 from Square

class Square2 extends Square {

and then When you call super(props) in Square2s constructor you are calling Squares constructor.

sorry for my bad English :(

The React.Component class you inherit (Square extends React.Component) is providing the props to your "Square" class via inheritance. These props are populated using the xml attributes included when the <Square> ponent is declared.

For example: If you declare your Square ponent as follows: <Square name="foo" size="big" cheese="gorganzola"/>,

the react engine will pass in a props value of {name: "foo", size:"big", cheese:"gorganzola"} to your Square class, making these values (aka properties, or props) available for you to use. This all takes place because Square is a React ponent (Square extends React.Component).