why I can not use function keyword to define a function inside a reactjs class

Question

I have been confused about some syntaxes in ReactJS, one is that when I define a function inside one Reactjs class, I can not use function keyword, but when I moved the function outside the class then I have to add keyword function before the signature. Second is that if I write a function inside the render(), then I have to use arrow function. For example, why the following is wrong:

class Test extends Component{
   constructor(props){
      super(props)
   }
   function test(){
     //this is wrong,I need to remove function keyword
   }

   render(){
     mytest(){
      //also this is wrong,I only can use arrow function
     }
   }
}

Because this is a class body and it expects to have methods. It's not allowed by the syntax of JS but also it doesn't have semantic sense - a function shouldn't have its own context, yet it will be bound to the class itself. — VLAZ
– VLAZ, Commented Nov 5, 2019 at 16:57
Note that this is not a React thing; it's basic JavaScript syntax. — Pointy
– Pointy, Commented Nov 5, 2019 at 17:00
@VLAZ if possible , can you please provide any javascript docs or references to support your answer. it will be helpful — vijay kiran reddy
– vijay kiran reddy, Commented Oct 12, 2020 at 3:58
@vijaykiranreddy tc39.es/ecma262/#sec-function-definitions tc39.es/ecma262/#sec-class-definitions tc39.es/ecma262/#sec-method-definitions — VLAZ
– VLAZ, Commented Oct 12, 2020 at 4:57
stackoverflow.com/questions/31048953/… @VLAZ , can you pls help me with my doubt in the above link — vijay kiran reddy
– vijay kiran reddy, Commented Oct 12, 2020 at 8:55

Clarity · Accepted Answer · 2019-11-05 16:55:58Z

18

That's because your component is class based and has methods, not functions. To define a method you can do like so:

class Test extends Component {
  constructor(props) {
    super(props)
  }

  test() { // Defining method

  }

  render() {
    this.test() // can be called like this
  }
}

If you want to be able to define functions inside a component you'll need to transform it to functional first:

function Test(props) {
  function test() {
    // This now works
  }
}

answered Nov 5, 2019 at 16:55

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Julian Kleine Over a year ago

Just quickly want to add that it is also possible to use arrow functions in functional components. As in const test = () => { // this now works }

devserkan Over a year ago

@Julian, but without the const part :)

Julian Kleine Over a year ago

@devserkan No, the const part is needed :)

Clarity Over a year ago

It's possible to have both arrow functions in functional and methods in class based components.

devserkan Over a year ago

Ah, I missed the "functional components" part. My bad @Julian :)

|

Collectives™ on Stack Overflow

why I can not use function keyword to define a function inside a reactjs class

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related