Reputation: 11960
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
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
- 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')
- 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
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