If we wanted to make a functional stateless ponent but we want methods that are able to access the props how would we do that? Is there like a general rule or best practice when it es to things like this
for example
function Stateless(props) {
function doSomething(props) {
console.log(props);
}
doSomething() // logs 'undefined'
return (
<div> some stuff </div>
}
the inside props is always not the props that given, at least in my experience.
If I didn't need a state (using Redux) but still wanted methods that accessed props, is it still good practice to use classes and not stateless functions?
If we wanted to make a functional stateless ponent but we want methods that are able to access the props how would we do that? Is there like a general rule or best practice when it es to things like this
for example
function Stateless(props) {
function doSomething(props) {
console.log(props);
}
doSomething() // logs 'undefined'
return (
<div> some stuff </div>
}
the inside props is always not the props that given, at least in my experience.
If I didn't need a state (using Redux) but still wanted methods that accessed props, is it still good practice to use classes and not stateless functions?
Share Improve this question asked Mar 2, 2019 at 6:37 christiancn7christiancn7 1752 gold badges3 silver badges10 bronze badges 2- 1 Why just call doSomething() without parameter? It seems that you have to change doSomething() to doSomething(props) to make sense – koo Commented Mar 2, 2019 at 6:45
-
1
doSomething(/*props you are passing is undefined*/)– Yury Tarabanko Commented Mar 2, 2019 at 6:48
3 Answers
Reset to default 4It is perfectly fine to use functions inside functional ponents. In fact React hooks that were introduced recently in React 16.8, are all about making functional ponents even more convenient by bringing state and lifecycle events to the the functional ponents via special hooks.
But as others have mentioned you need to pass proper arguments to your functions: doSomething(props) or not pass arguments at all and correspondingly never expect them in function declaration itself: function doSomething().
doSomething() logs undefined because the inner props variable wasn't delivered when you called doSomething(missing props). You can either remove the inner props:
function Stateless(props) {
function doSomething() {
console.log(props);
}
doSomething();
return (
<div> some stuff </div>
);
}
Or declare doSomething outside your ponent:
function doSomething(props) {
console.log(props);
}
function Stateless(props) {
doSomething(props);
return (
<div> some stuff </div>
);
}
Both will work. The first might be easier, but if your ponent is redrawn often, the second is more performant, since you only declare doSomething once.
function Stateless(props) {
function doSomething() { // 1. props is accessible inside the function so you can skip the parameter
console.log(props);
}
doSomething();
return (
<div> some stuff </div>
)//2. missing paranthesis
}