React. Conditional Rendering

Question

I have a React component:

class SignUpStepTwo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isTherapistUpdated: false,
      isProfessionalInfoAdded: false,
    }
  }

  render() {

    if (!this.state.isTherapistUpdated) {
      return (
        <StepTwoPersonalInfo />
      );
    }
    else if (this.state.isTherapistUpdated) {
      return (
        <StepTwoProfessionalInfo />
      );
    }
    else if (this.state.isProfessionalInfoAdded &&
      this.state.isTherapistUpdated) {
      return (
        <StepTwoTermsOfUse />
      );
    }
  }
}

export default SignUpStepTwo;

And I'm trying to change my bool flags and conditionally render my components. But the last if is never satisfied and the <StepTwoTermsOfUse/> component is not rendered.

See also reactjs.org/docs/conditional-rendering.html - I particularly like Inline If with Logical && Operator — TrueWill
– TrueWill, Commented Apr 5, 2019 at 13:31
I always make a statement of all conditions just to see if thats what I want.In your case, let this.state.isTherapistUpdated be a and this.state.isProfessionalInfoAdded be b. So, it would read as If a does not exists, do this. If b exists, do that. But if a and b both exists, do something different. Now if both a and b exists, 2nd condition automatically satisfies and it will not reach to 3rd condition. Try following style: If a exists and b also exists, do something else. But if b doesn't exists, do that. And finally if a doesn't exists, do this — Rajesh Dixit
– Rajesh Dixit, Commented Apr 5, 2019 at 13:43

Selenir · Accepted Answer · 2019-04-05 13:31:09Z

3

It's because the second condition is satisfied even if both this.state.isProfessionalInfoAdded and isTherapistUpdated are true.

To make this work you should put the third condition, before the second. Also, I've restructured your code a bit to skip unnecessary checks:

if (this.state.isProfessionalInfoAdded && this.state.isTherapistUpdated) {
  return (
      <StepTwoTermsOfUse/>
  );
}

if (this.state.isTherapistUpdated) {
  return (
      <StepTwoProfessionalInfo/>
  );
}

return (
    <StepTwoPersonalInfo />
);

answered Apr 5, 2019 at 13:31

Selenir

7181 gold badge8 silver badges17 bronze badges

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

Comments

M.Fazio · Accepted Answer · 2019-04-05 13:28:41Z

0

You should put the last if in first & it should work !

answered Apr 5, 2019 at 13:28

M.Fazio

611 gold badge1 silver badge6 bronze badges

1 Comment

Rajesh Dixit Over a year ago

Though its acceptable suggestion, its a comment and will attract unwanted comments/votes. My suggestion is to add some explanation as to what/why it would help? Are there any simpler approaches or alternatives

nsevens · Accepted Answer · 2019-04-05 13:29:59Z

You should switch your last two statements. The second if statement in your question satisfies if the 3rd one satisfies as well. So the seconds one make the function exit.

class SignUpStepTwo extends Component {
constructor(props) {
        super(props);
        this.state = {
            isTherapistUpdated: false,
            isProfessionalInfoAdded: false,
            }
        }
     }
render() {
        if (!this.state.isTherapistUpdated) {
            return (
                <StepTwoPersonalInfo />
            );
        }
        if (this.state.isProfessionalInfoAdded) {
            return (
                <StepTwoTermsOfUse/>
            );
        }

        return (
            <StepTwoProfessionalInfo/>
        );
    }
}

export default SignUpStepTwo;

What this does is:

If isTherapistIsUpdated === false, then render StepTwoPersonalInfo
If isTherapistIsUpdate === true (implied, because the first if does not match) AND isProfessionalInfoAdded === true, then render StepTwoTermsOfUse
In any other case, which means isTherapistIsUpdated === true AND isProfessionalInfoAdded === false, render StepTwoProfessionalInfo

MarcoS · Accepted Answer · 2019-04-05 13:40:21Z

I think if you use a temporary variable to set your logic result to, the code resuls being a bit clearer...

class SignUpStepTwo extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isTherapistUpdated: false,
            isProfessionalInfoAdded: false,
        }
    }

    render() {
        let render = (
          (!this.state.isTherapistUpdated) ? <StepTwoPersonalInfo /> :
          (this.state.isTherapistUpdated && this.state.isProfessionalInfoAdded) ? <StepTwoTermsOfUse/> :
          <StepTwoProfessionalInfo />
        );
        return render;
    }
}

export default SignUpStepTwo;

Collectives™ on Stack Overflow

React. Conditional Rendering

4 Answers 4

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Related