React.js If Statement

Question

I am having difficulties writing an if statement in React (bit new to this)

class TEST extends React.Component {
render() {
    const TEST = props => {
        if (props.isLoggedin("True")) {
            return (
                <Welcome />
            );
        }
        return (null);
    };
   }
 }
export default Switch(TEST);

The error message that I am getting is:

Your render method should have return statement

Not sure the best way to write this? Thanks

norbitrial · Accepted Answer · 2020-07-09 09:49:41Z

4

You don't need the const TEST = props => { } part, other than that looks okay.

Try as the following:

class TEST extends React.Component {
  render() {
    if (this.props.isLoggedin("True")) {
       return <Welcome />;
    }

    return null;
  }
}

export default Switch(TEST);

Or even shorter with ternary operator:

class TEST extends React.Component {
  render() {
    return this.props.isLoggedin("True") ? <Welcome /> : null;
  }
}

I hope this helps!

edited Jul 9, 2020 at 9:49

answered Jul 9, 2020 at 9:39

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

2 Comments

user3665791 Over a year ago

thanks, but then it errors as Props is not defined - 'props' is not defined no-undef

norbitrial Over a year ago

@user3665791 Probably you need this.props instead.

Fcmam5 · Accepted Answer · 2020-07-09 09:49:38Z

Maybe you wanted to do something like this:

class TEST extends React.Component {
   render() {
      if (this.props.isLoggedin("True")) {
          return (
              <Welcome />
          );
      }
      return (null);
   }
 }

Or this (if you want to use functional components):

const TEST = props => {
    if (props.isLoggedin("True")) {
        return (
            <Welcome />
        );
    }
    return (null);
  };
}

You could also do it like this:

const TEST = props => props.isLoggedin("True") && <Welcome />

What you actually had is that you only defined a function inside your render method, that expected a return statement.

See: https://reactjs.org/docs/components-and-props.html#function-and-class-components

Collectives™ on Stack Overflow

React.js If Statement

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related