CODEWITHSUNDEEP
javascriptreactjs
ForeFather321
ForeFather321

Reputation: 179

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

Upvotes: 8

Views: 3404

Answers (3)

react-newb
react-newb

Reputation: 21

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> component is declared.

For example: If you declare your Square component 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 component (Square extends React.Component).

Upvotes: 2

Quentin
Quentin

Reputation: 943193

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" comes 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 component that can do something with the props it is passed.

Later it shows you how to use that component.

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 component.

Upvotes: 6

morteza ataiy
morteza ataiy

Reputation: 923

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

Upvotes: 2

Related Questions