CODEWITHSUNDEEP
javascriptreactjs
Alwaysblue
Alwaysblue

Reputation: 11960

Using Props in stateful and Stateless component

So I want to understand why can't we use this.props in functional stateless component in react.

For example, I was studying HOC where we get props like this 

 const withClass = (WrappedComponent, className) => {
   console.log("this is wrapped component" + WrappedComponent)

return (props) => (
        <div className={className}>
           <WrappedComponent {...props} />
      </div>
    )
}

Now, Since this a functional component so if we do something like 

 <WrappedComponent {...this.props} />

it won't work, So my question is why can't we use this.props in functional component.

Ps: export default withClass( App, classes.App ); where App is class App extends PureComponent { (in case someone is wondering about our arguments.

Upvotes: 2

Views: 1500

Answers (2)

MwamiTovi
MwamiTovi

Reputation: 2522

@iRohitBhatia, your question is one that requires a journey into JavaScript basics because this is not actually a Reactjs concept but rather a JavaScript keyword. And here is a good resource, but i'll give a brief here.

Before the ES6 standard, JavaScript largely used Prototype-based programming which is a style of object-oriented programming (OOP) in which classes are not directly defined, but instead derived by adding properties and methods to an instance of another class. (See here).

So, in basic JavaScript, there two ways to create Object instances: Try this in Codepen

  1. Using normal functions (In React, think: functional/Stateless components)
function createSchool(name, type) {
  const p = {};
  p.name = name;
  p.type = type;
  p.description = function(){
    alert('Hello, ' + p.name + ' is a ' + p.type + '.')
  };
  return p;
}

// create
const makerere = createSchool('Makerere', 'University');
const kitovu = createSchool("St. Henry's", 'college')
  1. Using a constructor functions (In React, think: class/stateful components)
function School(name, type){
  this.name = name;
  this.type = type;
  this.description = function(){
    alert('Hello, ' + this.name + ' is a ' + this.type + '.')
  }
}

// create
const makerere = new School('Makerere', 'university');
const kitovu = new School("St. Henry's", 'college');

Why this ?

Using the constructor, we have two new objects each stored under a different namespace - that's why we call makerere or kitovu first so as to access the attributes. However, the two objects have the same attributes i.e. properties (name & type ) and method (description).

Despite that situation, each object uses the property values we assigned it at instantiation (create). The keyword this enables each object/class to use it's own values and not other unintended values.

So, in Reactjs, this.props enables each class component to strictly utilize it's own property values despite all classes inheriting from React.Component. While for functional components, props is implicitly unique to that component since they never share any parent.

Upvotes: 1

Maciej Sikora
Maciej Sikora

Reputation: 20162

Functional component has no this as it is only a function. Function in JavaScript has no this, until function isn't a method of any object, or isn't a constructor function used by new keyword. Also what is important to mention, arrow function, so exactly what your HOC is, has no possibility to be bonded to specific context, as it is possible only for normal functions, we can say standard functions.

This keyword exists everywhere, in global scope it is just the window object, but only inside objects it represents the object instance, although we can bind custom context(this) to the standard function by using .bind or .call methods, but it is different subject.

Going back to React, if you create a class component you will have this, and this.props will work as class component is transformed into object by new keyword, and all its methods are bounded with this as a reference to the object.

Summary - functional components are pure functions which have props passed as function arguments and which have no own this object.

Some additional resources to read about that:

Very good article about context and scope:

Upvotes: 1

Related Questions