React functional components with methods

Question

If we wanted to make a functional stateless component 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 comes 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?

Answer 1

It is perfectly fine to use functions inside functional components. In fact React hooks that were introduced recently in React 16.8, are all about making functional components even more convenient by bringing state and lifecycle events to the the functional components 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().

Answer 2

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

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 component is redrawn often, the second is more performant, since you only declare doSomething once.