React functional components with methods

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
}

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.


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().