how to write an arrow function within a class in React

Question

I am trying to write a function with properties but keep getting a syntex error.

I need to define my state but not sure where this should be placed. What is the best way to write the below code?

UPDATED--
class TEST extends React.Component {
   constructor(props) {
   super(props);
 }
state = {isApp: false,}
 myFunction  = ({ isApp }) => {
    return (
    <div>
       <p>Hello World</p>
    </div>
  )}
}

export default TEST;

I am guessing that my arrow function should not be within the class?

The syntax error has gone but now the page does not load at all, I guess it doesn't know what to do with "myFunction "

Syntax error: Unexpected token (24:11) 22 | } 23 | state = {isApp: false,} > 24 | const myFunction = ({ isApp }) => { | ^ 25 | return ( 26 | <div> 27 | {!isApp && — user3665791
– user3665791, Commented Jul 23, 2020 at 11:49
Remove const in front of myFunction and you forgot the closing paren on the return. You have one too many closing curly braces — possum
– possum, Commented Jul 23, 2020 at 11:52

Ross Allen · Accepted Answer · 2020-07-23 12:42:28Z

1

Initial state should be assigned to the instance in the constructor:

class TEST extends React.Component {
 constructor(props) {
   super(props);
   this.state = {isApp: false};
 }

 myFunction  = ({ isApp }) => {
    return (
    <div>
       <p>Hello World</p>
    </div>
  )};
}

answered Jul 23, 2020 at 12:42

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

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

Comments

Sviatoslav Slynchuk · Accepted Answer · 2020-07-23 12:21:16Z

0

You probably don't need an arrow function here. The body of that function could be placed inside the render function. As well, feel free to remove the constructor.

class TEST extends React.Component {
  state = {isApp: false,}
  render() {
    const {isApp} = this.state;
    return (
      <div>
          {!isApp  && <p>Hello World</p>}
      </div>
    );
  }
}

answered Jul 23, 2020 at 12:21

Sviatoslav Slynchuk

1814 bronze badges

Collectives™ on Stack Overflow

how to write an arrow function within a class in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related