CODEWITHSUNDEEP
javascriptreactjs
christiancn7
christiancn7

Reputation: 175

React functional components with methods

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?

Upvotes: 10

Views: 11549

Answers (3)

jorbuedo
jorbuedo

Reputation: 2161

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.

Upvotes: 3

jayarjo
jayarjo

Reputation: 16754

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

Upvotes: 4

Monica Acha
Monica Acha

Reputation: 1086

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
}

Upvotes: 2

Related Questions